介绍

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它允许您集中存储和管理应用程序的所有组件的状态。Vuex 的核心概念是“store”，它类似于一个全局状态树，所有组件都可以从中获取数据。Vuex 中有五个核心属性：

State：存储应用程序的所有状态（即数据），类似于组件中的 data 属性。可以通过 store.state 来访问。
Getters：允许您从 store 中派生出一些状态，类似于组件中的计算属性。可以通过 store.getters 来访问。
Mutations：是改变 store 中状态的唯一途径，类似于事件。必须是同步函数。可以通过 store.commit 来触发。
Actions：类似于 Mutations，但可以包含异步操作。可以通过 store.dispatch 来触发。
Modules：允许将 store 分割成多个小的 store，每个小的 store 可以拥有自己的 state、getters、mutations 和 actions。

使用 Vuex 首先需要在 Vue 项目中引入 Vuex 库，然后创建一个 store 实例，将其传递给根 Vue 实例。在组件中，可以通过访问 this.$store 来访问 store 实例中的 state、getters、mutations 和 actions。下面是一个示例：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

new Vue({
  store,
  el: '#app',
  computed: {
    count () {
      return this.$store.state.count
    },
    doubleCount () {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    incrementAsync () {
      this.$store.dispatch('incrementAsync')
    }
  }
})

在上面的示例中，我们定义了一个包含 count 属性的 state 对象，一个包含 increment 方法的 mutations 对象，一个包含 incrementAsync 方法的 actions 对象，一个包含 doubleCount 方法的 getters 对象。然后在根 Vue 实例中，我们将 store 实例传递给了 Vue 的 store 选项，这样在整个应用中都可以访问 store 实例。在组件中，我们通过 this.$store 访问了 store 实例中的各种属性和方法。

下面我将详细介绍一下 Vuex 的五个核心属性及其使用方法。

State

State 是 Vuex 存储数据的地方，它类似于组件中的 data 属性，但不同的是，所有组件都可以从 state 中获取数据，而不需要通过 props 属性传递数据。State 中的数据是响应式的，当 state 中的数据发生改变时，所有依赖于该数据的组件都会自动更新。下面是一个示例：

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

// 在组件中访问 state
this.$store.state.count

Getters

Getters 允许我们从 store 中派生出一些状态，类似于组件中的计算属性。Getters 可以看作是 state 的计算属性，当 state 中的数据发生改变时，所有依赖于该数据的 getters 也会自动更新。Getters 可以接收其他 getters 作为第二个参数，也可以接收 state 作为第一个参数。下面是一个示例：

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

// 在组件中访问 getters
this.$store.getters.doubleCount
this.$store.getters.tripleCount

Mutations

Mutations 是改变 store 中状态的唯一途径，类似于事件。Mutations 必须是同步函数，用于修改 state 中的数据。当使用 mutations 修改 state 中的数据时，必须使用 commit 方法触发 mutations。下面是一个示例：

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

// 在组件中触发 mutations
this.$store.commit('increment')

Actions

Actions 类似于 Mutations，但可以包含异步操作。Actions 用于提交 mutations，而不是直接修改 state 中的数据。当使用 actions 提交 mutations 时，必须使用 dispatch 方法触发 actions。下面是一个示例：

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

// 在组件中触发 actions
this.$store.dispatch('incrementAsync')

Modules

Modules 允许将 store 分割成多个小的 store，每个小的 store 可以拥有自己的 state、getters、mutations 和 actions。Modules 可以嵌套，允许我们在大的 store 中管理多个小的 store。下面是一个示例：

// 定义 cart module
const cart = {
  state: {
    items: []
  },
  mutations: {
    addToCart (state, payload) {
      state.items.push(payload)
    }
  },
  actions: {
    addToCart ({ commit }, payload) {
      commit('addToCart', payload)
    }
  },
  getters: {
    cartItemsCount (state) {
      return state.items.length
    }
  }
}

// 定义 store
const store = new Vuex.Store({
  modules: {
    cart
  }
})

// 在组件中访问 cart module
this.$store.state.cart.items
this.$store.getters['cart/cartItemsCount']
this.$store.dispatch('cart/addToCart', payload)

在上面的示例中，我们首先定义了一个 cart module，包含了 state、mutations、actions 和 getters。接着在定义 store 时，将 cart module 注册到了 store 中。最后，在组件中访问 cart module 时，需要使用命名空间的方式，即在 getters 和 actions 的名称前添加模块名，以避免命名冲突。

希望这些内容能够帮助你更好地了解 Vuex 的五个核心属性及其使用方法。

vue3中vuex对比pinia

Vue3使用Pinia

vue状态管理详解以及在vue3中使用vuex

vuex的五个属性及使用方法