Vuex中的模块化-Module

Posted 2021-09-03 dawang521

Vuex中的模块化-Module

为什么会有模块化？

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

由此，又有了Vuex的模块化

模块化的简单应用

应用

定义两个模块 user 和 setting

user中管理用户的状态 token

setting中管理 应用的名称 name

const store  = new Vuex.Store({
  modules: {
    user: {
       state: {
         token: \'12345\'
       }
    },
    setting: {
      state: {
         name: \'Vuex实例\'
      }
    }
  })

定义child-b组件，分别显示用户的token和应用名称name

<template>
  <div>
      <div>用户token {{ $store.state.user.token }}</div>
      <div>网站名称 {{ $store.state.setting.name }}</div>
  </div>
</template>

请注意： 此时要获取子模块的状态 需要通过 $store.state.模块名称.属性名 来获取

看着获取有点麻烦，我们可以通过之前学过的getters来改变一下

 getters: {
   token: state => state.user.token,
   name: state => state.setting.name
 } 

请注意：这个getters是根级别的getters哦

通过mapGetters引用

 computed: {
       ...mapGetters([\'token\', \'name\'])
 }

模块化中的命名空间

命名空间 namespaced

这里注意理解

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

这句话的意思是 刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用 如

  user: {
       state: {
         token: \'12345\'
       },
       mutations: {
        //  这里的state表示的是user的state
         updateToken (state) {
            state.token = 678910
         }
       }
    },

通过mapMutations调用

 methods: {
       ...mapMutations([\'updateToken\'])
  }
 <button @click="updateToken">修改token</button>

但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置

高封闭性？可以理解成 一家人如果分家了，此时，你的爸妈可以随意的进出分给你的小家，你觉得自己没什么隐私了，我们可以给自己的房门加一道锁（命名空间 namespaced）,你的父母再也不能进出你的小家了

如

  user: {
       namespaced: true,
       state: {
         token: \'12345\'
       },
       mutations: {
        //  这里的state表示的是user的state
         updateToken (state) {
            state.token = 678910
         }
       }
    },

使用带命名空间的模块 action/mutations

方案1：直接调用-带上模块的属性名路径

test () {
   this.$store.dispatch(\'user/updateToken\') // 直接调用方法
}

方案2：辅助函数-带上模块的属性名路径

  methods: {
       ...mapMutations([\'user/updateToken\']),
       test () {
           this[\'user/updateToken\']()
       }
   }
  <button @click="test">修改token</button>

方案3： createNamespacedHelpers 创建基于某个命名空间辅助函数

import { mapGetters, createNamespacedHelpers } from \'vuex\'
const { mapMutations } = createNamespacedHelpers(\'user\')
<button @click="updateToken">修改token2</button>

小结：

若有不懂的地方，请加q群147936127交流或者vx: ltby52119，谢谢~