在工作中使用VUEX进行状态管理非常方便。共享数据非常方便。需要注意的是，vuex的数据是保存在浏览器的内存中的。如果F5刷新页面，之前申请的内存就会丢失。会被释放，js脚本会重新加载，这样我们之前存放在vuex中的数据就没有了。如果我们的一些重要数据，比如token，想要长期保存，可以放在localStorage/cookes中。vuex一共有5个属性供我们管理数据，如下：state：是vuex中存储数据的最小最基本的单位，vuex的数据源。对于常规页面，最好只读取状态中的数据，不要直接修改。如果需要修改state中的属性值，可以通过官方推荐的mutations进行修改。具体用法请看下文。state:{name:'烟雨任平生',count:10}//使用方法this.$store.state.namemutations:相当于vuex中的方法，可以定义各种处理数据的方法，import第一个参数为一般是状态对象，第二个参数可以是函数传递过来的数据进行操作。普通页面触发mutation，需要用到commit方法，常用的是$store.commit('yourevevt',data)，要触发mutationsinactions中的方法，可以在方法中传入context对象动作，并使用上下文来操作突变中的方法。具体用法请看下文。mutations:{changeName(state,val){state.name=val}}//使用方法this.$store.commit('changeName','ZhangDida')actions：actions和mutations一样，都是用于存储方法属性，但操作用于存储具有异步行为的方法。我们对接口的请求可以存储在动作中。需要注意的是，我们还是不要直接修改状态中的数据。如果涉及到修改state中的数据，修改的操作还是以mutations中的方法为媒介，改变state中的数据。可以在action方法中接受一个参数context放在第一个位置，然后通过context.commit('mutationsEvent',val)的形式触发mutations中的方法修改state中的数据。actions:{GET_NAME(context,val){console.log(context)//打印出来可以在context对象中看到状态context.commit('changeName',val)}}//使用方法this.$store.dispatch('GET_NAME','ZhangTick')getters：相当于vuex中的computed属性，用法类似于vue中的computed，可以在getters中引用state中的数据进行二次处理，然后直接在页面上引用这个值，getters方法中的一个state参数获取状态数据，处理后返回直接使用。getters:{doubleCount(state){//state中count的平方returnstate.count*state.count}}//使用this.$store.getters.doubleCountmodules:模块化vuex，每个单独的模块都有独立的状态,mutations,actions和getters使结构更清晰。当项目比较大的时候，我们不能保证不会有同名的方法。这样在使用dispatch/commit调用的时候，可能会出现调用一个方法却执行了多次的情况。为了解决这种情况，我们可以在每个模块的js文件中添加namespaced:true属性，这样模块的名字就可以作为唯一标识来区分，这样就不会混淆了，但是调用时需要注意，需要在方法前加上模块名。//一个单独的模块user.js文件，setnamespaced:trueexportdefault{namespaced:true,//设置namespacestate:{name:'administratorinformation',id:'FD57F54D5F7SD5'},mutations:{changeName(state,value){state.name=value}},动作:{GET_NAME(context,val){console.log(context.state);setTimeout(()=>{context.commit('changeName','更改成功')},500)}}}importVuefrom'vue'importVuexfrom'vuex'importuserfrom'./modules/user'//import模块一importcustomerfrom'./modules/customer'//import模块二Vue.use(Vuex)exportdefaultnewVuex.Store({modules:{user,customer}})这样，当我们想要在页面中调用模块1中的GET_NAME方法，需要在方法名前加上模块名This.$store.dispatch('user/GET_NAME','张迪达')欢迎交流！
