深入理解Vuex 模块化(module)

背景介绍

Vue.js 是目前广泛应用于前端开发中的一款 JavaScript 框架。它的状态管理工具——Vuex， 大大减轻了开发者在组件之间共享数据时的繁琐操作，让数据流变得简单、易于维护、减少错误。那么如何更好地利用Vuex，使得你的代码更好的进行管理呢？这就需要深入理解Vuex模块化。

什么是Vuex 模块化(module)

在大型项目中，我们可以将 Vuex 的状态划分为多个模块。同一个模块可以有自己的 state、mutations、actions、getters等属性，同时这些属性也可以被其他模块访问，实现了模块化的效果。从而对于大型应用来说，这些模块组成一个完整的状态树，便于统一管理。

模块化开发的两种方式

Vuex 支持两种方式来进行模块化的开发：

方式一：直接使用模块内的属性的命名空间

命名空间是一个对象，该对象会与父模块的命名空间进行合并。这意味着，嵌套模块可以使用模块的全局命名空间，或者使用它们自己的本地命名空间。

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true, // 开启命名空间
      state: {
        name: 'Tom',
        age: 18
      },
      mutations: {
        updateName(state, newName) {
          state.name = newName
        },
        updateAge(state, newAge) {
          state.age = newAge
        }
      },
      actions: {
        updateInfo({commit}, {name, age}) {
          return new Promise(resolve => {
            setTimeout(() => {
              commit('updateName', name)
              commit('updateAge', age)
              resolve()
            }, 1000)
          })
        }
      }
    }
  }
})

// 在组件使用时，在属性名称之前加上命名空间的名称
computed: {
  ...mapState({
    name: state => state.account.name,
    age: state => state.account.age
  })
},

methods: {
  ...mapActions('account', ['updateInfo'])
}

方式二：使用模块的嵌套属性来进行命名空间的操作

Vuex 还支持使用模块的嵌套属性来进行命名空间的操作。在这种模式下，我们可以使用命名空间的目录结构来查找模块的缩写。

// 定义子模块
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  modules: { /* 子模块嵌套 */ }
}

// 定义 store
const store = new Vuex.Store({
  modules: {
    // 自动命名空间
    a: {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      modules: {
        // 自动命名空间
        subModule: {
          state: { ... },
          mutations: { ... },
          actions: { ... }
        }
      }
    }
  }
})

// 在组件使用时，直接按照嵌套的层次调用属性即可
computed: {
  ...mapState({
    A: state => state.a.someProp,
    subA: state => state.a.subModule.someProp
  })
}

示例

示例一：嵌套模块

const store = new Vuex.Store({
  modules: {
    user: {
      namespaced: true, // 开启命名空间
      state: {
        name: 'Tom',
        age: 18
      },
      getters: {
        getName: state => state.name,
        getAge: state => state.age
      },
      mutations: {
        updateName(state, newName) {
          state.name = newName
        },
        updateAge(state, newAge) {
          state.age = newAge
        }
      },
      actions: {
        updateInfo({commit}, {name, age}) {
          return new Promise(resolve => {
            setTimeout(() => {
              commit('updateName', name)
              commit('updateAge', age)
              resolve()
            }, 1000)
          })
        }
      },
      modules: {
        info: {
          namespaced: true,
          state: {
            detail: 'This is the user information module.'
          },
          mutations: {
            updateDetail(state, newDetail) {
              state.detail = newDetail
            }
          },
          getters: {
            getDetail: state => state.detail
          }
        }
      }
    }
  }
})

// 在组件使用时，在属性名称之前加上命名空间的名称
computed: {
  ...mapState({
    name: state => state.user.name,
    age: state => state.user.age,
    detail: state => state.user.info.detail
  }),

  ...mapGetters('user', ['getName', 'getAge', 'info/getDetail'])
},

methods: {
  ...mapActions('user', ['updateInfo']),

  ...mapMutations('user', ['updateName', 'updateAge', 'info/updateDetail'])
}

示例二：分层模块

const store = new Vuex.Store({
  modules: {
    common: {
      namespaced: true,
      state: {
        loading: false,
        error: null
      },
      mutations: {
        showLoading(state) {
          state.loading = true
        },
        hideLoading(state) {
          state.loading = false
        },
        showError(state, error) {
          state.error = error
        },
        clearError(state) {
          state.error = null
        }
      },
      getters: {
        isLoading: state => state.loading,
        getError: state => state.error
      }
    },

    user: {
      namespaced: true,
      state: {
        name: 'Tom',
        age: 18
      },
      mutations: {
        updateName(state, newName) {
          state.name = newName
        },
        updateAge(state, newAge) {
          state.age = newAge
        }
      },
      actions: {
        fetchUserInfo({commit, dispatch}) {
          commit('common/showLoading', null, { root: true }); // 访问全局命名空间方法的方式

          return getUserInfo().then(res => {
            commit('updateName', res.name)
            commit('updateAge', res.age)
          },error => {
            commit('common/showError', error.message, { root: true });
            dispatch('reset', null, { root: true }); // 调用全局命名空间下的其他action
          }).finally(() => {
            commit('common/hideLoading', null, { root: true });
          })
        },
        reset({commit, dispatch}) {
          commit('updateName', 'Tom')
          commit('updateAge', 18)
          dispatch('common/clearError', null, { root: true }); // 调用全局命名空间下的其他mutation
        }
      }
    }
  }
})

// 在组件使用时，在属性名称之前加上命名空间的名称
computed: {
  ...mapState({
    name: state => state.user.name,
    age: state => state.user.age,
    isLoading: state => state.common.loading,
    error: state => state.common.error
  }),
  ...mapGetters('common', ['isLoading', 'getError'])
},

methods: {
  ...mapActions('user', ['fetchUserInfo', 'reset']),

  ...mapMutations('user', ['updateName', 'updateAge']),

  ...mapMutations('common', ['showLoading', 'hideLoading', 'showError', 'clearError'])
}

总结

通过以上示例，相信大家已经对Vuex的模块化有了深入了解。使用Vuex模块化，可以让我们的代码变得更加清晰易懂，分工更加明确，同时也更加方便地维护代码。在实际开发的过程中，可以结合实际业务需求，巧妙运用Vuex模块化进行状态管理，提高代码质量。