欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  它对于我们来说就像眼镜,只有我们自己知道是否需要它,它好用但不能滥用,我对它的理解,从以下几个层面开始展开:
 
  1 .state
 
  1)单一状态树
 
  Vuex使用单一状态树--是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着,每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
 
  2)在Vue组件中获得Vuex状态
 
  最好在根实例中注册store选项,该store实例会注入到根组件下的所有子组件中,且子组件能通过this.$store访问到。而不是在每个需要使用state的组件中需要频繁地导入。
 
  3)mapState辅助函数
 
  当一个组件需要获取多个状态时候,可以使用mapState辅助函数帮助我们生成计算属性,这样可以简化代码书写。mapState函数会返回一个对象,然后可以使用对象展开运算符将它与局部计算属性混合使用。
 
  4)不要滥用vuex
 
  使用Vuex并不意味着你需要将所有的状态放入Vuex。虽然将所有的状态放到Vuex会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
 
  2. getters
 
  getters用来从store中的state中派生出一些状态,例如对列表进行过滤并计数
 
  getters可以认为是store的计算属性。和state类似,有mapGetters辅助函数。
 
  3. mutations
 
  更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutations非常类似于事件:每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数
 
  1)提交载荷(Payload)
 
  你可以向store.commit传入额外的参数,即mutation的载荷(payload):
 
  2)Mutations需遵守Vue的响应规则
 
  3)使用常量替代Mutation事件类型
 
  4)mutation必须是同步函数
 
  5)在组件中提交Mutations
 
  你可以在组件中使用this.$store.commit('xxx')提交mutation,或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用(需要在根节点注入store)。
 
  4. actions
 
  actions类似于mutation,不同在于:
 
  · actions提交的是mutation,而不是直接变更状态。
 
  · actions可以包含任意异步操作。
 
  1)在组件中分发Action
 
  你在组件中使用this.$store.dispatch('xxx')分发action,或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用(需要先在根节点注入store)
 
  2)组合Actions
 
  Action通常是异步的,那么如何知道action什么时候结束呢?更重要的是,我们如何才能组合多个action,以处理更加复杂的异步流程?
 
  首先,你需要明白store.dispatch可以处理被触发的action的回调函数返回的Promise,并且store.dispatch仍旧返回Promise。
 
  5. Modules
 
  由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。
 
  为了解决以上问题,Vuex允许我们将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
 
  所以vuex在做非父子通信以及状态统一管理都给我们提供了便捷,我们要合理使用。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h62787.shtml