Vuex学习笔记

Vuex和全局对象的不同:

1.Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效的更新。

2.不能直接改变store中的状态。改变store中的状态的唯一途径就是显示地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

 

1.State

1.Vuex 使用单一状态树,即每个应用将仅使用一个store实例。

2.Vuex通过store选项,提供了一种机制将状态从根组件注入到每一个子组件中。

3.借助mapState函数帮我们生成计算属性,少按几次键盘。

4.使用对象展开运算符合并对象。?----如何使用

5.在某些情况下,有些状态严格属于单个组件,这时候状态还是作为组件的局部状态好,没有必要将所有的状态都放入Vuex,否则会使得代码变得冗长和不直观。

2.Getter

1. 有时候需要从state中派生出一些状态供组件使用,可以在store中设置getters属性(类似于组件的计算属性),组件通过$.store.state.getter.访问使用。

2.getter也可以接受其他getter来作为第二个参数使用。

3.可以通过getter返回一个函数,给getter传参。

4.通过mapGetters将stroe中的getter映射到局部计算属性。

3.Mutation

1.状态改变的唯一方法是提交mutation,通过在vue中调用$.store.commit来调用相应的mutation修改相应的状态。

2.提交载荷:commit中可以传入额外的参数,来为mutation提供参数,通常这个参数是一个对象。

3.对象风格的commit:commit可以采用对象风格

  

Vuex学习笔记

4.可以使用常量来代替Mutation事件类型 

5.mutation必须是同步函数

6.可以使用mapMutations辅助函数将组件中的methods映射为store.commit

4.Action

1.actions属性中可以定义异步操作

2.通过$.store.dispatch出发相应的方法

3.可以使用mapActions辅助函数将组件中的methods映射为store.dispatch调用

4.结合回调函数,可以组合使用action(ES6 promise ?)

5.Module

1.应用的所有状态集中到一个store中管理时store对象会变得非常臃肿,为了解决这个问题,vuex允许使用module分模块 。

2.命名空间:通过添加namespated:true是模块成为带命名空间的模块,这样所有模块内部的getter、action、mutation都会根据模块注册的路径调整命名 。

3.使用了命名空间后getter、mutation和action的触发:

  a. getter的第三个参数为rootState,第四个参数为rootGetters,这样在getter中就可以通过rootState和rootGetters访问根节点的信息,而想触发本身的getter和原来一样。

  b. 若想在全局空间内分发action或提交mutation只需要在dispatch或commit的第三个参数中添加{root:true}即可

4.在带命名空间的模块中注册全局 action,只需要在action中添加root:true,并将action的定义放在函数handler中即可

5.对于自己开发的插件如果提供了模块,可以给定插件的参数命名对象来允许用户自己制定命名空间。

6.模块动态注册:registerModule() 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspfxy.html