模块化和持久化步骤：

vuex的模块化步骤：

1.在src/store中创建index.js文件
2.在src/store中创建modules文件夹
3.在modules文件夹下创建 xx.js文件
   

export default{
       namespaced:true,
       state:{},
       mutations:{},
       actions:{},
       getters:{},
}

4.在index.js中引入xx.js文件，并且通过modules属性引入
 

import xx from './modules/xx'
const store = new Vuex.store({
modules:{
    xx:模块对象
}
 })

在组件中引用：

*原生方式访问模块化

调用state：{{$store.state.模块名.数据名}}

调用mutations：this.$store.commit('模块名/mutations相关方法')

调用actions：this.$store.dispatch('模块名/actions相关方法')

调用getters：{{$store.getters['模块名/getters的相关名称']}}

*辅助函数方式访问模块化

1.导入createNamespacedHelpers

import {createNamespacedHelpers} from 'vuex'

2.通过createNamespacedHelpers来获取辅助函数

const {mapActions，mapStat，mapGetters，mapMutations}=createNamespacedHelpers('模块名')

3.在computed和methods中通过扩展运算符实现映射

methods:{

...mapActions(['actions相关方法名'])，

...mapMutations（['mutations相关方法名']）

}，

 computed:{
        ...mapState([" "]),
        ...mapGetters([" "]),
  } 

vuex的持久化的步骤：

1.安装vuex-persistedstate依赖包：npm i vuex-persistedstate

2.导入vuex-persistedstate

import createPersistedstate from 'vuex-persistedstate'

3.在src/store/index.js中配置插件

const store=new Vuex.Store({
    plugins:[
      createPersistedstate({
        key:'xx',
        paths:['x.num']
      })
    ]
})