Vuex源码解析（一）：Module初始化深入剖析与实例应用

前端

2024-02-14 12:06:36

揭秘 Vuex 模块：掌控大型 Vuex 应用的利器

什么是 Vuex 模块？

Vuex 模块是将 Vuex 中的状态、getter、mutation 和 action 进行拆分的手段。它允许我们将大型 Vuex 应用分解为更易于管理的模块化组件，从而提高代码的可读性和可维护性。

模块初始化过程

模块初始化过程涉及以下步骤：

将 Vuex mixin 混入到 Vue 中，从而向 Vue 的原型链添加 _initVuex() 方法。
调用 store.registerModule(moduleName, moduleDefinition) 方法，将模块定义注册为根模块。
调用 store.registerModule(moduleName, moduleDefinition, true) 方法，将模块定义注册为嵌套模块。
调用 store.commit('vuexInit') 方法，通知 Vuex 已完成初始化。

模块结构

一个模块的结构如下：

{
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
}

state： 模块的状态对象。
getters： 模块的 getter 函数。
mutations： 模块的 mutation 函数。
actions： 模块的 action 函数。
modules： 模块的子模块。

模块用法

模块可以使用两种方式：

在组件中使用模块：

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters([
      'doubledCount'
    ])
  },
  methods: {
    ...mapMutations([
      'increment',
      'decrement'
    ]),
    ...mapActions([
      'incrementAsync'
    ])
  }
}

在其他模块中使用模块：

import { Module } from 'vuex'

export const counterModule: Module<any, any> = {
  state: {
    count: 0
  },
  getters: {
    doubledCount(state) {
      return state.count * 2
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
}

代码示例

以下是一个使用 Vuex 模块的示例代码：

// 根模块
const store = new Vuex.Store({
  modules: {
    counter: counterModule
  }
})

// 组件中使用模块
export default {
  computed: {
    ...mapState('counter', {
      count: state => state.count
    }),
    ...mapGetters('counter', [
      'doubledCount'
    ])
  },
  methods: {
    ...mapMutations('counter', [
      'increment',
      'decrement'
    ]),
    ...mapActions('counter', [
      'incrementAsync'
    ])
  }
}