Vuex入门实践（中）：深入浅出，全面掌握Vuex

2023-12-22 05:38:09

mutations

1. mutations是什么

Mutation是Vuex中唯一改变状态的方法。mutations是一个对象，它的每个属性都是一个函数。这些函数称为mutation handlers。

2. mutation如何使用

mutation handlers接收两个参数：state和payload。state是当前的state对象，payload是mutation handler的载荷。

// actions/increment.js
export const increment = ({ state, commit }) => {
  // 提交mutation
  commit('INCREMENT_COUNT')
}

// mutations/index.js
export const mutations = {
  INCREMENT_COUNT(state) {
    // 修改状态
    state.count++
  }
}

在上面的例子中，INCREMENT_COUNTmutation handler将state.count值加1。

3. mutation何时使用

Mutation应该只用于改变状态。不要在mutation handlers中执行异步操作，比如发起网络请求。

4. mutation命名规范

Mutation handlers的名称应该以动词开头，并且应该使用大写字母。例如，INCREMENT_COUNT是一个合法的mutation handler名称，而incrementCount则不是。

getters

1. getters是什么

Getter是Vuex中用于从state中派生数据的函数。getters是一个对象，它的每个属性都是一个函数。这些函数称为getter functions。

2. getters如何使用

Getter functions接收一个参数：state。它们返回从state中派生出来的数据。

// getters/index.js
export const getters = {
  doubleCount: (state) => {
    return state.count * 2
  }
}

在上面的例子中，doubleCountgetter function将state.count值乘以2。

3. getters何时使用

Getters应该用于从state中派生数据。不要在getter functions中执行异步操作，比如发起网络请求。

4. getters命名规范

Getter functions的名称应该以getter开头，并且应该使用大写字母。例如，doubleCount是一个合法的getter function名称，而getDoubleCount则不是。

actions

1. actions是什么

Action是Vuex中用于触发mutation的函数。actions是一个对象，它的每个属性都是一个函数。这些函数称为action handlers。

2. actions如何使用

Action handlers接收两个参数：context和payload。context是一个对象，它包含state、commit和dispatch属性。payload是action handler的载荷。

// actions/increment.js
export const increment = ({ commit }) => {
  // 提交mutation
  commit('INCREMENT_COUNT')
}

在上面的例子中，incrementaction handler将提交INCREMENT_COUNTmutation。

3. actions何时使用

Action应该用于触发mutation。不要在action handlers中直接改变状态。

4. actions命名规范

Action handlers的名称应该以动词开头，并且应该使用大写字母。例如，increment是一个合法的action handler名称，而incrementCount则不是。

modules

1. modules是什么

Module是Vuex中组织state、mutations、getters和actions的一种方式。module是一个对象，它包含state、mutations、getters和actions属性。

2. modules如何使用

Module可以嵌套使用。一个module可以包含子module，子module也可以包含子module，依此类推。

// store/index.js
export default new Vuex.Store({
  modules: {
    counter: {
      state: {
        count: 0
      },
      mutations: {
        INCREMENT_COUNT(state) {
          state.count++
        }
      },
      getters: {
        doubleCount: (state) => {
          return state.count * 2
        }
      },
      actions: {
        increment: ({ commit }) => {
          commit('INCREMENT_COUNT')
        }
      }
    }
  }
})

在上面的例子中，counter是一个module。它包含state、mutations、getters和actions属性。

3. modules何时使用

Module应该用于组织state、mutations、getters和actions。当你的应用变得复杂时，使用module可以使你的代码更易于维护。

4. modules命名规范

Module的名称应该使用小写字母。例如，counter是一个合法的module名称，而Counter则不是。

Vuex Devtools

Vuex Devtools是一个用于调试Vuex应用的工具。它可以帮助你查看state、mutations、getters和actions。

// 安装Vuex Devtools
npm install --save-dev vuex-devtools

安装完成后，在你的Vuex store中启用Vuex Devtools。

// store/index.js
import Vuex from 'vuex'
import VuexDevtools from 'vuex-devtools'

export default new Vuex.Store({
  // ...
  plugins: [VuexDevtools.instrument()]
})