## 使用 ``` //配置vuex步骤 //1.运行 npm i vuex -S //2.导入包 import Vuex from 'vuex' //注册vuex到vue中 Vue.use(Vuex); //4.new Vuex.Store() 实例,得到一个数据仓储对象 var store = new Vuex.Store({ state: { //可以把state想象成组件中的data,专门存储数据的 count: 0, }, //注意:如果要操作store中的state值,只能通过调用mutation提供的方法,才能操作对应的数据. //不推荐直接操作state,因为万一导致了数据的紊乱,不能快速定位到错误的原因,因为每个组件都可能有操作数据的方法 //最多只能传递一个参数 mutations: { increment: function (state, params) { state.count++; }, //注意:如果组件想要调用mutation中的方法,只能使用this.$store.commit('方法名') //这种调用mutation方法的格式,和this.$emit()相似 decrement: function (state, params) { state.count -= params; } }, getters: { //注意:这里的getters,只负责对外提供数据,不负责修改数据,如果想要修改state中的数据,请去找mutations optCount: function (state) { return '当前最新的count值:' + state.count; //使用如下方式调用 // {{$store.getters.optCount}} //对比发现,发现getters中的方法和组件中的过滤器比较类似,因为过滤器和getters都没有修改原数据,都是把元数据做了一层包装,提供给了调用者. //其次,getters也和computed比较像,只要sate中的数据发生了变化,那么,如果getters正好也引用了这个数据,那么就会立即触发getters的重新求值. } } }); //总结: //1.state中的数据,不能直接修改,如果想要修改,必须通过mutations //2.如果㢟想要直接从state上获取数据:需要this.$store.state.*** //3.如果组件想要修改数据,必须使用mutations提供的方法,需要通过this.$store.commit('方法名称',唯一的一个参数) //4.如果store中的state上的数据,在对外提供的时候,需要做一层包装,那么,推荐使用getters,如果需要使用getters,则用this.$store.getters.*** Vue.config.productionTip = false; new Vue({ el: '#app', router, //5.挂载vue实例中 store, components: {App}, template: '<App/>' }); ```