做項目用到vuex，不可避免的需要將store模塊化，這樣在后期維護，以及開發(fā)過程中都要規(guī)范不少，但是在模塊化過程中，不可避免的會出現(xiàn)命名沖突等問題，所以我們在開發(fā)時需要注意以下幾點:

話不多說，直接上代碼
1、如何模塊化

import Vue from 'vue'
import Vuex from 'vuex' //引入 vuex
import createPersistedState from 'vuex-persistedstate'   //用來處理vuex刷新狀態(tài)重置的問題，原理其實也就是使用了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內(nèi)定義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,  //官方給的命名空間設(shè)置屬性
  state,
  mutations
}

3、vue文件中使用

import { mapState, mapMutations } from 'vuex' 

//data或者computed中調(diào)用mapState
...mapState({
    userInfo: state => state.modules1.userInfo
  })
//methods中調(diào)用mapMutations

//2個參數(shù)，第一個是你的模塊名，第二個是你模塊內(nèi)的方法，上面的state也是相同的，需要先指到對應(yīng)模塊，才能拿到模塊內(nèi)的值
...mapMutations('modules1', [
   'changeUserInfo'
]),
//方法調(diào)用
this.changeUserInfo(userInfo)

4、js文件中調(diào)用

import store from '@/store/index.js'
//在這里可以直接console一下store，就可以看到store中定義的方法以及state中的變量內(nèi)容，使用方法也就一目了然了
//獲取state中的值
store.state.modules1.userInfo
//使用mutations中的方法
let obj = {}
store.commit('modules1/changeUserInfo', obj)

ok，收工！