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']
})
]
})