vuex模块化过程中的问题

做项目用到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，收工！