Vuex

[xv777]

Vuex

• tips 不能直接在组件中改变state中的值和状态，需要通过commit调用mutations里面的方法调用，即在mutations里面写方法，在组件中调用来改变全局状态
• State 通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件可以通过this.$store访问到 mapState辅助函数 mapState实际上是帮助我们生成计算属性，mapState是为了获取store中的属性的，并不用改变当前状态，只是获取到状态，并映射到计算属性中。如果计算属性的变量名和state的变量名一样，可以用字符串代替，mapState要用在computed里 用computed去接收state，用data接收即用一个变量进行赋值的时候state改变，data不能及时响应更新，用computed就可以做到及时响应更新 ...展开运算符，将对象或者数组中的所有元素结构展开 ...mapState使用展开运算符，就是将mapState的内容混合到计算属性中去 不必要放到Vuex中的状态，比如只是在当前组件中使用的状态只放在当前组件中就可以
• Getter Getter可以认为是state的计算属性,Getter的返回值会根据他的依赖缓存起来，只有当他的依赖发生改变才会被重新计算。Getter只接收state作为第一个参数，也可以接受其他getter作为第二个参数 Getter会暴露为store.getters对象，可以以属性值的方式访问这些值，在computed用访问 也可以通过让getter返回一个函数，来实现给getter传参。在对store里数组进行查询时非常有用，getter在通过方法访问的时候每次都会调用，不会缓存结果 mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性，使用展开运算符将getter混入到computed对象中，如果想将一个getter属性另取一个名字，使用键值对形式
• Mutation 改变store中的状态唯一方法是提交mutation，只接受state作为第一个参数，调用mutation时需要使用store.commit('方法名')来调用mutation，另外可以向mutation传入额外的参数，叫做mutation的载荷（payload），store.commit('方法名'， n)，大多数情况下，载荷应该是一个对象，这样可以包含更多字段并且记录的mutation更加易读 最好提前初始化所有所需的属性，添加新的属性时，应该使用Vue(obj, 'newProp', 123) mutation必须是同步函数，实质上在回调函数中的任何状态的改变都是不可追踪的 可以在组件中使用this.$store.commit('xxx')提交mutation，或者用maoMutations辅助函数将组件中的函数映射为store.commit调用（需要在根节点注入store）
• Actions actions提交的是mutation，而不是直接变更状态，action可以包含任何异步操作，在action里面直接commit到mutation改变状态 actions接受一个与store实例具有相同方法和属性的context对象，因此可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters 实践中我们经常用参数解构的方法来简化代码{ name } actions通过dispatch方法触发 store.dispatch('setusername') actions同样支持载荷payload方式和对象的方式进行分发，在actions里commit提交mutation执行同步。 在组件中使用this.$store.dispatch('xx') 分发actions，或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用 store.dispatch可以处理（被触发的action的处理函数返回的）promise，并且store.dispatch仍旧返回promise 当一个store.dispatch在不同模块中触发多个action函数，在在这种情况下，只有当所有的触发函数完成后，返回的promise才会执行。 注意： 在actions中提交mustation的时候必须将commit解构出来
• module Vuex允许我们将store分割成模块module，每个模块拥有自己的state，mutation，action，getter 对于模块内部的mutation和getter，接受的第一个参数是模块的局部状态对象 对于模块内部的action，局部状态通过context.state暴露出来，根节点状态为context.rootState 对于模块内部的getter，根节点状态会作为第三个参数暴露出来 默认情况下，模块内部的action、mutation和getter是注册在全局命名空间的这样能使多个模块能够对同一mutation和action做出响应