Vuex可能会用的知识点

1、registerModule(模块动态注册)

解释

在 store 创建之后，你可以使用 store.registerModule 方法注册模块：

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})复制代码

动态创建，就是在需要的地方，再去注册该模块。在页面中，使用如下方式进行手动注册

<script>
    import moduleA from '../store/modules/moduleA'
    created() {
        this.$store.registerModule('moduleA', moduleA);
    }
</script>
复制代码

也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。

Ps：调用时应该在创建完实例之后的钩子中，未创建实例调用会找不到 store。

例子

<template>
  <div>
    <p @click="showStore">显示 {{ state }}</p>
  </div>
</template>
<script>
export default {
  data(){
    return{
      state:''
    }
  },
  created() {
    this.$store.registerModule('moduleA', {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({ commit }, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val
        }
      }
    })
  },
  methods:{
    showStore(){
      console.log(this.$store.mutations)
      this.state = this.$store.state.moduleA.rightTest
    }
  }
}
</script>复制代码

2、模块重用

有时我们可能需要创建一个模块的多个实例，例如：

• 创建多个 store，他们公用同一个模块
• 在一个 store 中多次注册同一个模块

如果我们使用一个纯对象来声明模块的状态（state），那么这个状态对象会通过引用被共享，导致状态对象被修改时 store 或模块间数据互相污染的问题。

实际上这和 Vue 组件内的 data 是同样的问题。因此解决办法也是相同的——使用一个函数来声明模块状态（仅 2.3.0+ 支持）：

const MyReusableModule = {
  state () {
    return {
      foo: 'bar'
    }
  },
  // mutation, action 和 getter 等等...
}复制代码

例子

在一个 store 中多次注册同一个模块

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './moduleA.js'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
//在这里多次注册同一组件
    moduleA,
    moduleB:moduleA 
  }
})复制代码

moduleA.js

export default {
    namespaced: true,
    state: {
        rightTest: 999
    },
    mutations: {
        putTest: (state, val) => {
          state.rightTest = val
        }
      }
}复制代码

调用页面

<template>
  <div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  created() {
    this.putTest(1) //改变moduleA的state中的值
    console.log('模块A',this.$store.state.moduleA.rightTest) // 模块A1
    console.log('模块B',this.$store.state.moduleB.rightTest) // 模块B1
  },
  methods:{
//获取moduleA的mutation方法
    ...mapMutations('moduleA',['putTest'])
  }
}
</script>
复制代码