做项目用到vuex，不可避免的需要将store模块化，这样在后期维护，以及开发过程中都要规范不少，但是在模块化过程中，不可避免的会出现命名冲突等问题，所以我们在开发时需要注意以下几点:
话不多说，直接上代码
1、如何模块化
import Vue from 'vue'
import Vuex from 'vuex' //引入 vuex
import createPersistedState from 'vuex-persistedstate' //用来处理vuex刷新状态重置的问题，原理其实也就是使用了sessionStorage或者localStorage
import modules1 from './modules/modules1'
import modules2 from './modules/modules2'
Vue.use(Vuex) //使用 vuex
export default new Vuex.Store({
modules: {
modules1,
modules2
},
plugins: [createPersistedState({ storage: window.localStorage })]
})
2、模块modules1内定义state和mutations
const state = {
// 用户昵称和头像
userInfo: {
userName: '',
avatar: ''
}
}
const mutations = {
changeUserInfo(state, params) {
state.userInfo.userName = params.userName
state.userInfo.avatar = params.avatar
}
}
export default {
namespaced: true, //官方给的命名空间设置属性
state,
mutations
}
3、vue文件中使用
import { mapState, mapMutations } from 'vuex'
//data或者computed中调用mapState
...mapState({
userInfo: state => state.modules1.userInfo
})
//methods中调用mapMutations
//2个参数，第一个是你的模块名，第二个是你模块内的方法，上面的state也是相同的，需要先指到对应模块，才能拿到模块内的值
...mapMutations('modules1', [
'changeUserInfo'
]),
//方法调用
this.changeUserInfo(userInfo)
4、js文件中调用
import store from '@/store/index.js'
//在这里可以直接console一下store，就可以看到store中定义的方法以及state中的变量内容，使用方法也就一目了然了
//获取state中的值
store.state.modules1.userInfo
//使用mutations中的方法
let obj = {}
store.commit('modules1/changeUserInfo', obj)
ok，收工！
