Vuex

.A{背景：红色；白颜色;padding:20px;}.Ali.done{background:green;}写在前面Vuex是专门为vue.js应用开发的一种状态管理模式。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。以上是Vuex官网对Vuex的描述，乍一看可能会比较迷惑。简单store模式的状态管理在上一篇博客Vue简单状态管理——store模式中有介绍。store对象中state属性对应的可以存储的是组件的共享数据状态。因此，state属性的存在就是上述定义中集中存储管理应用的所有组件的状态。在store模式下，组件必须使用store提供的方法来修改store中的数据状态。不允许直接修改store.state的值，这在Vuex中也是一样的。store模式的每个组件在修改state状态值时，并不会记录每次做了什么样的修改，所以不可能记录每次状态的变化。但是，Vuex中记录了每次状态修改的详细信息，可以很方便地跟踪每次状态变化。实现方式是commitmutations（mutations就是变化，commitmutations就是提交变化，Vuex规定修改状态必须提交修改应用，然后让store实例调用应用的修改方法，而不是直接调用由组件本身在商店中修改方法）。因此，组件不允许直接修改store中的状态，而应该执行commitmutation通知store改变状态的约定，就是上面的定义，用相应的规则保证状态以可预测的方式改变。1、自定义store模式变成Vuex模式Vuex模式和自定义store模式的核心都是store（仓库）。“商店”基本上是一个容器，可以容纳应用程序的大部分状态。为了方便记录每次状态变化，Vuex模式将我们自定义store简单状态管理模式中修改store.state状态的所有方法都放到了mutations对象属性中。当组件想要改变状态时，它会调用Vuex的store实例提供的store.commit()接口来提交改变。将上一篇博客的自定义简单store模式修改为Vuex模式，如下：//原来的store.js不再需要，直接在main.js中定义Vuex的store实例importVuefrom'vue'importAppfrom'./App.vue'importVuexfrom'vuex'Vue.config.productionTip=falseVue.use(Vuex)conststore=newVuex.Store({state:{todos:[{text:'写中文作业',done:false},{text:'数学论文',done:false}],x:'hi'},mutations:{addTodo(state,str){constobj={text:str,done:false}state.todos.push(obj)},setDone(state,index){state.todos[index].done=true},setHi(state,str){state.x=str}}})newVue({渲染:h=>h(App),store//注入store机制，这样就可以从this.$store从根元素到所有子组件访问store实例}).$mount('#app')//A.vue.A{背景：红色；白颜色;padding:20px;}.Ali.done{background:green;}//B.vue.B{背景：黄色；padding:20px;}2.stateState和mutations是创建Vuex存储实例的最基本组件。2.1stateVuex使用单状态树，每个应用只包含一个store实例。所以state就是用来存放整个应用的所有状态的。那么每个组件如何读取store实例中的状态呢？最简单的就是在计算属性中返回某个状态，一定要在计算属性中获取，不能在数据中获取，因为在计算属性中返回时，当计算属性依赖的状态发生变化时，会重新计算该属性，并且视图会相应地更新。如果是在data中获取，只会执行一次，不会随着状态的变化而改变，无法进行数据响应。computed:{todos(){returnthis.$store.state.todos},x(){returnthis.$store.state.x}}当组件需要获取多个状态时。可以使用mapState获取import{mapState}from'vuex'//引入mapState//当原始模型返回计算时的状态时：mapState(['todos',//将this.todos映射到store.state。todos'x'])//重命名状态时computed:mapState({todos:state=>state.todos,x:'x'})//为了能够使用`this`获取本地状态,必须使用正则函数computed:mapState({countPlusLocalState(state){returnstate.count+this.localCount}})//当状态计算属性与局部计算属性混合时computed:{localComputed(){/*...*/},//使用object的扩展运算符将这个对象混合到外部对象中...mapState({//...})}2.2mutationsmutation必须是一个同步函数。mutations对象属性存储改变状态的方法。这些方法都接受状态作为第一个参数。这些方法不能被组件直接调用。组件需要通知store实例调用。唯一的通知方式是提交申请：store.commit()(1)不带payload提交在mutations中，payload是参数的意思，不带payload的payload是submitted表示不需要通过参数，如下：mutations:{increment(state){//改变状态state.count++}}store.commit('increment')(2)loadcommit当committing需要传递参数给被调用的方法时，这些方法接受有效载荷作为第二个参数。如下：mutations:{increment(state,n){state.count+=n}}store.commit('increment',10)//大多数情况下，payload应该是一个对象，可以包含多个字段和recordedmutations会是更具可读性的mutations:{increment(state,payload){state.count+=payload.amount}}store.commit('increment',{amount:10})store.commit()有两种提交方式.一种是提交两个参数，第一个是回调函数的名称，第二个是传递的参数。另一种是直接提交一个信息对象，包括所有的提交信息，如下：store.commit({type:'increment',amount:10})//当使用对象式提交方式时，整个对象是passedasapayload给突变函数mutations:{increment(state,payload){state.count+=payload.amount}}3.gettersandactions在store实例构造选项中引入最基本的state和mutations选项后，它是对上述options扩展选项介绍的补充。3.1gettersstate选项中的数据是基础元数据，但是可能会有一些数据是从基础数据中计算出来的，需要经常使用，所以Vuex.Store提供了一个计算属性选项，就像Vue组件中的computed计算属性一样。使用getters构造函数选项存储计算属性，同样，计算属性的计算函数将状态作为第一个参数。3.2actionsmutations选项中的方法必须是同步函数，不支持异步函数。为了支持改变状态的异步函数，Vuex.Store提供了actions构造函数选项。Action通过store.dispatch方法触发store.dispatch('increment')总结Vuex比较深入的getters和action的用法，就不举例了，例子都是从官网复制过来的。使用的时候可以去官网查看。