7.Vuex

当我们的应用遇到多个组件共享状态时，会需要：多个组件依赖同一个状态。传递参数的方法对于多层嵌套的组件来说会很繁琐，而且对于兄弟组件之间的状态传递也无能为力。Vuex解决了多个组件之间共享同一个状态的问题。它使用集中存储来管理应用程序所有组件的状态。这也是为什么官网再次提到Vuex对于构建大型应用的价值。如果您不打算开发大型单页应用程序，使用Vuex可能会很乏味且多余。这是真的——如果你的应用足够简单，你最好不要使用Vuex。使用localStorage或sessionStorage。Vuex是专门为Vue.js应用开发的一种状态管理模式1.Vuex解决了组件之间共享同一个状态的问题（解决不同组件之间的数据共享）2.数据在组件中的持久化。vuex的使用：1.在src目录下新建vuex文件夹2.在vuex文件夹下新建store.js3.安装vuexcnpminstallvuex--save4.在store.js中importvueimportvuefrom'vue'刚刚创建；从'vuex'导入Vuex；Vue.use(Vuex);definedata/*1.state用于在vuex中存储数据*/varstate={count:1}definemethodmutations是方法，主要用于改变state中的数据varmutations={incCount(){++状态计数；}}getter的优势类似于计算属性。当改变state中的count数据时，会触发getters中的方法获取新值（基本不习惯）vargetters={computedCount:(state)=>{returnstate.count*2;}}actionAction类似于mutation，不同的是Action提交mutation，而不是直接改变state。动作可以包含任意异步操作。varactions={incMutationsCount(context){/*所以你可以调用context.commit来提交一个mutation*/context.commit('incCount');/*执行mutations中的incCount方法改变state中的数据*/}}5、Exposeconststore=newVuex.Store({state,mutations,getters,actions})exportdefaultstore;6、使用vuex引入storeimportstorefrom'../vuex/store.js'；registerexportdefault{data(){return{msg:'我是一个home组件',value1:null,}},store,methods:{incCount(){this.$store.commit('incCount');/*触发数据里面的状态*/}}}获取状态this.$store.state中的数据。数据触发突变以更改状态中的数据this.$store.commit('incCount');触发动作中的方法this.$store.dispatch('incCount');获取getters中方法返回的数据{{this.$store.getters.computedCount}}示例：App.vuestore.jsimportVuefrom"vue";importVuexfrom"vuex";Vue.use(Vuex);//定义data---state用于在vuex中存储数据letstate={count:1,};//定义方法---方法主要用于改变状态中的数据letmutations={changeCount:function(){state.count+=1;}};//定义getters---优势类像一个计算属性，当state中的count数据发生变化时，会触发getters中的方法（前提是这个方法中使用了state中的数据）获取新的值（基本不用）letgetters={comCount:(state)=>{returnstate.count*2;}};//定义action---Action类似于mutation，区别在于：//Action提交mutation而不是直接改变状态//Action可以包含任何异步操作。letactions={actionCount:function(context){//所以你可以调用context.commit来提交一个mutation。context.commit("changeCount");//执行mutations中的comCount方法，改变state中的数据。}};conststore=newVuex.Store({state,mutations,getters,actions});exportdefaultstore;Page1.vue</style>Page2.vue数据持久化：第一次加载时缓存数据到vuex里面，每次路由时从vuex中读取数据切换。持久数据也可以用在其他组件中。先把缓存数据的变量存入store.js-->stateletstate={list:[]};letmutations={//注意：给state方法传参的第一个参数必须是stateaddList:function（状态，数据）{state.list=数据；}};在Page2.vue中请求数据。