Vuex中的模块化-Module

为什么会有模块化?

由于使用单一状态树,应用的所有状态都会集中在一个比较大的对象,当应用比较复杂时,store对象就会变得臃肿,因此,就有了Vuex模块化

模块化的简单应用

定义两个模块 usersetting
user中管理token
setting中管理应用名称name

const store = new Vuex.Store({
  modules: {
    user: {
      state: {
        token: '1212'
      }
    },
    setting: {
      state: {
        name: 'beizi'
      }
    }
  },

模块化的命名空间

刚才的user模块还是setting模块,它的 action、mutation 和 getter 其实并没有区分,都可以直接通过全局的方式调用 如
但是,如果我们想保证内部模块的高封闭性,我们可以采用namespaced来进行设置

  • 高封闭性?
  • 可以理解成 一家人如果分家了,此时,你的爸妈可以随意的进出分给你的小家,你觉得自己没什么隐私了,我们可以给自己的房门加一道锁(命名空间 namespaced),你的父母再也不能进出你的小家了
  modules: {
    user: {
      // 命名空间
      namespaced: true,
      state: {
        token: '1212'
      },
      mutations: {
        // 这里的mutations 是user的
        upToken(state) {
          state.token = '666'
        }
      }
    },
    setting: {
      state: {
        name: 'beizi'
      }
    }

  },

使用 createNamespacedHelpers 创建基于命名空间的辅助函数




你可能感兴趣的:(Vuex中的模块化-Module)