Vuex 进阶之模块化组织详解
上上篇：vuex 入门
上一篇：vuex 提升
自制vuex logo
前两篇讲解了一下 vuex 的基本使用方法，可是在实际项目中那么写肯定是不合理的，如果组件太多，不可能把所有组件的数据都放到一个 store.js 中的，所以就需要模块化的组织 vuex，首先看一下 。
项目结构
一、首先执行以下命令：
vue init webpack-simple vuex-demo cd vuex-demo npm install npm install vuex -s npm run dev
二、按照上图结构创建文件目录
vuex 模块化目录
三、编写文件
我们就延用上两篇文章中的例子。先说一个各个文件的作用
types.js 内定义，使用常量替代 mutation 事件类型
user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations，并最后统一导出（类似上个例子中的 store.js ）
getters.js 内写原来的 getters ，用来获取属性
actions.js 内写原来的 actions ，就是要执行的动作，如流程的判断、异步请求
index.js 是用来组装 actions.js 、 getters.js 、user.js 的，然后进行统一的导出
1. 在 main.js 中导入 index.js 文件并注册
import vue from 'vue'
import app from './app.vue'
import store from './store/index.js'
new vue({
store,
el: '#app',
render: h => h(app)
})
2. 在 types.js 内定义 并导出，默认全部大写
// 定义类型常量，默认全部大写
const increment = 'increment'
const decrement = 'decrement'
export default {
increment,
decrement
}
注意：把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然。用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。
3. user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations
// 导入 types.js 文件
import types from "./../types";
const state ={
count:5
}
// 定义 getters
var getters ={
count(state){
return state.count
}
}
const actions ={
increment({ commit, state }){
// 此处提交的事件与下方 mutations 中的 types.increment 对应，与原来 commit('increment') 的原理相同，只是把类型名换成了常量
commit(types.increment)
},
decrement({commit,state}){
if (state.count>10) {
// 此处提交的事件与下方 mutations 中的 types.decrement 对应
commit(types.decrement)
}
}
}
const mutations ={
// 此处的事件为上方 actions 中的 commit(types.increment)
[types.increment](state){
state.count++
},
// 此处的事件为上方 actions 中的 commit(types.decrement)
[types.decrement](state){
state.count--
}
}
// 最后统一导出
export default {
state,
getters,
actions,
mutations
}
注意：上方 mutations 中的 [types.increment] 写法，因为 types.increment 是一个对象，所以不能直接当做一个函数名来写，需要用到 es2015 风格的计算属性命名功能来使用一个常量作为函数名，方能正常使用，原来的写法为：
const mutations ={
increment(state){
state.count ++;
}
}
4. getters.js 内写原来的判断奇偶数方法
// 因为数据从 user.js 中获取，所以需要引入该文件
import user from './modules/user'
const getters = {
isevenorodd(state){
// 注意数据是从 user.js 中获取的，所以写成 user.state.count
return user.state.count % 2 == 0 ? "偶数" : "奇数"
}
}
// 并导出
export default getters;
5. actions.js 内写原来的异步操作
// 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件
import types from './types'
const actions= {
incrementasync({ commit, state }) {
// 异步操作
var p = new promise((resolve, reject) => {
settimeout(() => {
resolve()
}, 3000);
});
p.then(() => {
commit(types.increment);
}).catch(() => {
console.log('异步操作');
})
}
}
// 最后导出
export default actions;
6. 在 index.js 中组装 actions.js 、 getters.js 、user.js 的，然后统一导出
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
import getters from './getters'
import actions from './actions'
import users from './modules/user'
// 导出 store 对象
export default new vuex.store({
getters,
actions,
modules:{
users
}
})
注意：在导出 store 对象时，因为 getters 和 actions 在 vuex 的核心概念中有默认，可以直接写入。但是 users 不是默认的，所以用到 vuex 中的 modules 对象进行导出
核心概念
7. vue.app 文件不作任何修改
<template>
<div id="app">
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
<button @click="incrementasync">延时增加</button>
<p>{{count}}</p>
<p>{{isevenorodd}}</p>
</div>
</template>
<script>
import { mapgetters, mapactions } from "vuex";
export default {
name: 'app',
data () {
return {
msg: 'welcome to your vue.js app'
}
},
computed:mapgetters([
'count',
'isevenorodd'
]),
methods:mapactions([
'increment',
'decrement',
'incrementasync'
])
}
</script>
最后，惊心动魄的时候到了，我这费半天劲的东西到底能不能跑起来
vuex模块化.gif
对于新手们来说，光是看一次可能很难理解这个过程，还是要亲自多试一试的，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。