一起来看看Vuex的使用流程吧？

1.使用Vuex的目的是实现多组件状态管理，需要多个组件之间共享数据2.Vuex的5个核心中，state和mutation是必须的，其他的可以根据需求添加1.state负责状态管理，类似于vue中的data，用于初始化数据2.mutation专门用于修改state中的数据，由commit触发3.action可以处理异步，由dispatch触发，不直接去修改state，首先在组件中通过dispatch触发action，然后在action函数commit内触发mutation，通过mutation修改state值4、getterVuex中的computed属性，相当于Vue中的computed，依赖statestate值，state值一旦改变，getter会重新计算。也就是说，当一个数据依赖于另一个数据变化时，必须使用getter。五、Module模块化管理使用流程1、创建store实例并exportstore.jsimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({//declarestatestate:{userInfo:{userName:""}},//声明突变mutations:{setUserInfo(state,userInfo){state.userInfo=userInfo}},//声明动作actions:{setUserInfo({commit},userInfo){commit('setUserInfo',userInfo)}},//声明gettersgetters:{userName(state){return"name:"+state.userInfo.userName}}})exportdefaultstore2.引入VueximportVuefrom'vue'importAppfrom'./App.vue'importstorefrom'./store'newVue({render:h=>h(App),store}).$mount('#app')3.在组件exportdefault{methods:{setInfo(){this.$store.commit('setUserInfo',{userName:"Guigui"})}}}使用方法2import{mapState,mapGetters,mapMutations,mapActions}from'vuex'exportdefault{methods:{...mapActions(['setUserInfo']),//...mapMutations(["setUserInfo"]),setInfo(){this.setUserInfo({userName:"Guigui"})},computed:{...mapState({userInfo:state=>state.userInfo}),...mapGetters(['userName']),}}本文转载自微信“前端达人”，作者鬼哥。转载本文请联系前端达人公众号。