Vuex 4 模块化管理 Vuex 状态

2023-09-03 20:45:08

为什么要使用模块？

在中小型 Vue.js 项目中，Vuex 可以通过一个全局状态树来管理应用中所有的状态。但是，当项目变得越来越复杂，应用中需要管理的状态变得越来越多时，这种单一的全局状态树就会变得难以维护和管理。为了解决这个问题，Vuex 4 引入了模块化管理状态的新功能。

Vuex 4 模块化管理状态

Vuex 4 的模块化管理状态功能允许我们将 Vuex 状态划分为多个模块，每一个模块都可以包含属于自己的 state / mutations / getters / actions。这样，我们就可以将大型应用程序中的状态按照不同的功能模块进行分组，从而使状态管理变得更加清晰和易于维护。

创建模块

要创建一个模块，我们可以使用 Vuex.Store 的 registerModule() 方法。该方法接收两个参数：模块的名称和模块的定义对象。模块的定义对象可以包含以下属性：

state：模块的初始状态
mutations：模块的 mutations
getters：模块的 getters
actions：模块的 actions

使用模块

创建好模块之后，我们就可以在组件中使用模块的状态、mutations、getters 和 actions 了。

在 Vue.js 组件中，我们可以使用 mapState()、mapMutations()、mapGetters() 和 mapActions() 辅助函数来将模块的状态、mutations、getters 和 actions 映射到组件的计算属性和方法。

示例

// 创建模块
const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
}

// 注册模块
const store = new Vuex.Store({
  modules: {
    moduleA
  }
})

// 在组件中使用模块
const MyComponent = {
  computed: {
    ...mapState('moduleA', ['count']),
    ...mapGetters('moduleA', ['doubleCount'])
  },
  methods: {
    ...mapActions('moduleA', ['increment', 'incrementAsync'])
  }
}