Vuex之理解Modules

理解Modules

1.什么是module

  • 背景:VueState使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理。

  • module可以让每一个模块拥有自己的statemutationactiongetters,使得结构非常清晰,方便管理。

2.怎么用module

  • 一般结构

    const moduleA = {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
     }
    const moduleB = {
      state: { ... },
      mutations: { ... },
      actions: { ... }
     }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB})
  • 模块内部的数据:①内部state,模块内部的state是局部的,也就是模块私有的,比如是car.js模块state中的list数据,我们要通过this.$store.state.car.list获取;②内部gettermutationaction,仍然注册在全局命名空间内,这是为了多模块可以同时响应同一mutationthis.$store.state.car.carGetter的结结果是undefined,而通过this.$store.state.carGetter则可以拿到。

  • 传参:getters====({state(局部状态),getters(全局getters对象),roosState(根状态)});actions====({state(局部状态),commit,roosState(根状态)}).

    原文作者:何凯
    原文地址: https://segmentfault.com/a/1190000009133424
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞