Vuex状态管理指南（二）：深入探讨Mutation、Action和Module

2024-01-15 08:46:16

一、Mutation的扩展使用方法

1. 提交Payload

除了直接传入一个函数作为Mutation的处理程序外，我们还可以传入一个对象作为Payload，以便在Mutation中访问额外的信息。例如：

store.commit('setUser', { id: 1, name: 'John' })

在Mutation中，我们可以通过mutation.payload来访问Payload对象：

mutations: {
  setUser(state, payload) {
    state.user = payload
  }
}

2. 使用Mutation Types

Mutation Types是一种将Mutation的类型字符串化的方法，可以提高代码的可读性和可维护性。例如：

const SET_USER = 'SET_USER'

mutations: {
  [SET_USER](state, payload) {
    state.user = payload
  }
}

然后在提交Mutation时，我们可以使用Mutation Types来代替字符串：

store.commit(SET_USER, { id: 1, name: 'John' })

二、Action的扩展使用方法

1. 提交Payload

与Mutation类似，Action也可以提交Payload。例如：

store.dispatch('getUser', { id: 1 })

在Action中，我们可以通过action.payload来访问Payload对象：

actions: {
  getUser({ commit }, payload) {
    axios.get(`/users/${payload.id}`).then(response => {
      commit('setUser', response.data)
    })
  }
}

2. 使用Action Types

与Mutation Types类似，Action Types是一种将Action的类型字符串化的方法，可以提高代码的可读性和可维护性。例如：

const GET_USER = 'GET_USER'

actions: {
  [GET_USER]({ commit }, payload) {
    axios.get(`/users/${payload.id}`).then(response => {
      commit('setUser', response.data)
    })
  }
}

然后在提交Action时，我们可以使用Action Types来代替字符串：

store.dispatch(GET_USER, { id: 1 })

三、Module的扩展使用方法

1. 命名空间

Module可以具有自己的命名空间，以便避免与其他Module中的状态和方法冲突。例如：

const userModule = {
  namespaced: true,
  state: {
    user: {}
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload
    }
  },
  actions: {
    getUser({ commit }, payload) {
      axios.get(`/users/${payload.id}`).then(response => {
        commit('setUser', response.data)
      })
    }
  }
}

然后在根模块中注册该Module：

const store = new Vuex.Store({
  modules: {
    user: userModule
  }

在组件中，我们就可以使用命名空间来访问Module中的状态和方法：

this.$store.state.user.user
this.$store.commit('user/setUser', { id: 1, name: 'John' })
this.$store.dispatch('user/getUser', { id: 1 })

2. 局部状态和方法

Module可以具有自己的局部状态和方法，以便在该Module中独享。例如：

const userModule = {
  state: {
    user: {}
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload
    }
  },
  actions: {
    getUser({ commit }, payload) {
      axios.get(`/users/${payload.id}`).then(response => {
        commit('setUser', response.data)
      })
    }
  },
  getters: {
    userName(state) {
      return state.user.name
    }
  }
}

然后在根模块中注册该Module：

const store = new Vuex.Store({
  modules: {
    user: userModule
  }
})

在组件中，我们就可以使用Module中的局部状态和方法：

this.$store.state.user.user
this.$store.commit('user/setUser', { id: 1, name: 'John' })
this.$store.dispatch('user/getUser', { id: 1 })
this.$store.getters['user/userName']