Vuex 4源码学习笔记 - Store 构造函数都干了什么（四）

在上一篇笔记中： ，我们复习了Vuex的使用方式，以及为什么要使用Vuex，同时看到了Vuex是如何与Vue去结合到一起的。 Vuex使用简单的API管理全局状态，保证组件间共享数据的同步，然而Vuex做了那么多事情，内部都进行了哪些操作呢？如何与Vue进行结合的呢？想要了解Vuex的实现原理，第一步就是了解Vuex的store是怎样构造的。接下来就让我们一起来学习Vuex的Store构造函数。

Vuex的Store构造函数

在上一篇笔记中，我们知道Vuex的核心是一个store，它包含着应用的所有状态。store使用一个构造函数来创建，这个构造函数接受四个参数：

• state：应用程序的初始状态。
• mutations：用于修改state的对象。
• actions：用于触发mutation的对象。
• getters：用于从state中获取数据的对象。

mutations

mutations是Vuex中用于修改state的对象。mutation是一个函数，它接受state作为参数，并返回一个新的state。mutation必须是同步的，这意味着它们不能包含任何异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

在上面的例子中，我们定义了一个名为increment的mutation。这个mutation接受state作为参数，并返回一个新的state，其中count属性加1。

actions

actions是Vuex中用于触发mutation的对象。action是一个函数，它接受一个commit函数和一个可选的payload作为参数。commit函数用于触发mutation，而payload是传递给mutation的数据。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在上面的例子中，我们定义了一个名为incrementAsync的action。这个action接受一个commit函数和一个可选的payload作为参数。commit函数用于触发increment mutation，而payload是传递给increment mutation的数据。

getters

getters是Vuex中用于从state中获取数据的对象。getter是一个函数，它接受state作为参数，并返回一个值。getter可以用来获取state中的任何数据，包括其他getter返回的数据。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

在上面的例子中，我们定义了一个名为doubleCount的getter。这个getter接受state作为参数，并返回一个值。这个值是state.count属性的2倍。

modules

modules是Vuex中用于将store拆分成多个模块的对象。module是一个对象，它包含着自己的state、mutations、actions和getters。

const store = new Vuex.Store({
  modules: {
    counter: {
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        incrementAsync ({ commit }) {
          setTimeout(() => {
            commit('increment')
          }, 1000)
        }
      },
      getters: {
        doubleCount (state) {
          return state.count * 2
        }
      }
    }
  }
})

在上面的例子中，我们定义了一个名为counter的module。这个module包含着自己的state、mutations、actions和getters。

总结

Vuex的Store构造函数用于创建Vuex的store。store包含着应用的所有状态，并使用mutations、actions、getters和modules来管理这些状态。mutations用于修改state，actions用于触发mutation，getters用于从state中获取数据，而modules用于将store拆分成多个模块。