1、下载 (整体代码在最下面 也可直接查看)
下载vuex，会得到一个store文件夹，内部我们有一个index根文件，自己添加module文件夹
npminstallvuex --save
在main.js中引入import store from "./store/index";
目前我只建了home模块
2、将module里面的模块引入index.js中
import Vue from 'vue'
import Vuex from 'vuex'
//引入用户模块
import home from './module/home'
Vue.use(Vuex)
export default new Vuex.Store ({
modules: {
home,
}
})
3、在每个模块当中（home.js）写入独立的state，mutations等等。。。
const state = {
}
const mutations ={
}
const actions ={
}
const getters = {
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
导出时，会多出一个namespaced: true，一般我们在模块使用时，都会加入这个属性。命名空间：namespaced: true：当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名，也就是说，我们在调用这些方法时，需要加上这个文件的路径（比如我要访问这个文件中的state里边的某个属性：this.$store.state.home。后边这个home就是多了个home.js模块名，因为如果不加模块名，那我们会访问所有模块中的属性，那就乱了），所以我们要加上命名空间，相当于独立的区块去使用，模块和模块之间互不干扰。
home.js中
const state = {
userName:"Admin",
typeMenut:"sideMenut",
}
const mutations ={
setMenut(state, typeMenut) {
state.typeMenut = state.typeMenut == 'headerMenut'?'sideMenut':'headerMenut';
}
}
const actions ={
}
const getters = {
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
我们重点说一下vue中怎么获取模块中的内容。我们可以和平常一样，直接用this.$store.state.home.userName来获取到state中的userName内容。
在结构中：
在methods中：
我们今天说说在项目中最常使用的：辅助函数mapState，mapGetters，mapActions 和mapMutations 。
不一一举例，简单说两个mapState和mapActions ，深入理解可去看官网：
我们在使用时，需要先引入（home.vue中）
import{ mapState，mapActions }from'vuex'
这两个函数，前者写在计算属性computed中，后写是方法，写在 methods中；
在写入时，需要用到展开符...，它可以将内容一 一的展开
举例:var a = [1,2,3] var b = [4,5,6] var c = [...a,...b] // 打印c为:[1,2,3,4,5,6]
那我们获取一下state中的userName：
computed: {
...mapState({
userName: state => state.home.userName,
})
},
在标签中直接使用
methods: {
...mapMutations(['home/setMenut']),
setMenut() {
this['home/setMenut']()//注意，这里this后没有点 }
}
展开mapMutations，返回是个数组，数组中是个字符串，返回home模块下的addsetMenut，定义一个setMenut，直接触发就可以。有人会问，触发mutations中的方法不是应该用commit吗，答案是我们用了mapMutations，它会将这个路径直接映射成commit方法，所以我们直接用就行，这也是与原来的区别。
这样写出来是好用的但是home是个模块，在这个模块下如果命名空间比较深入，还有其他模块，一层一层比较多就会变成这样
因此我们可以用createNamespacedHelpers(可点击查看具体)命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数。
就是我们可以从vuex中引入 createNamespacedHelpers ，然后将刚才的字符串作为参数，传进来，如下：
// 这里引入createNamespacedHelpers
import { createNamespacedHelpers } from 'vuex'
// 定义mapState, mapMutations ，并将home传入 createNamespacedHelpers
const { mapState, mapMutations } = createNamespacedHelpers('home')
methods: {
// 这里可以直接使用mapState...mapMutations(['mapState'])
}
这就是vuex模块化，写法都很多，看我们自己的习惯，当然了，我们在模块中，还可以使用常量替代 Mutation 事件类型。在多人开发时，我们知道 mutations 中放入了方法，如果有很多方法，多人协作时找起来会比较麻烦，那我们可以创建一个放入常量的文件（我创建的 type.js 文件），在里边我们可以定义常量，但注意的是，我们开发中习惯常量要大写，单词之间用下划线分开。并且，在模块中引入这个文件：
1、type.js 在里边创建一个常量，开发时前后要一致，并加以标注：
// 前后都要大写，一般前后名称一致，但是为了我们能够理解，本次我们写两个不一致的。
// 开发中，我们应该这样写：export const SET_MENUT = 'SET_MENUT' // 修改菜单类型
// 本次我们定义前后不一样的export const SET_MENUT ='AAA'
2、在home模块中引入 type.js 并使用引入进来的常量：
import { SET_MENUT } from './type'
3、页面中
全部代码
以token为例
index.js
import Vue from 'vue'
import Vuex from 'vuex'
//引入用户模块
import common from './module/common'
Vue.use(Vuex)
export default new Vuex.Store ({
modules: {
common,
}
})
main.js
common.js
import { SET_TOKEN } from '../type'
const state = {
domain: 'g1_kanban_ocr',
token:null
}
const mutations ={
[SET_TOKEN](state, token) {
state.token = token;
}
}
const actions ={
}
const getters = {
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
type.js
export const SET_TOKEN = 'SET_TOKEN'
vue页面
// 这里引入createNamespacedHelpers
import { createNamespacedHelpers } from 'vuex'
// 定义mapState, mapMutations ，并将common 传入 createNamespacedHelpers
const { mapState, mapMutations } = createNamespacedHelpers('common')
methods: {
onSubmit(values) {
values.domain =this.$store.state.common.domain
getToken(values)
.then(res => {
this.$store.commit('common/SET_TOKEN', res.token)
})
.catch(res => {
this.hasError = true;
})
}
},
不足地方后续更新中。。。。。