为什么要使用状态管理

使用状态管理的主要目的是为了更好地管理应用程序的状态。随着应用程序规模的增大，应用程序中的状态会变得越来越复杂，从而导致以下问题：

1. 状态散乱。 状态散布在整个应用程序中，使得它们难以跟踪和管理。当多个组件需要访问同一个状态时，就会出现代码重复的问题。
2. 状态不可追踪。 当状态变化时，我们需要找到所有引用该状态的地方并手动更新它们。这可能导致漏掉某些状态更新，从而导致应用程序的不一致。
3. 难以调试。 当应用程序出现问题时，我们需要追踪状态的变化来确定问题所在。如果状态散布在整个应用程序中，则会导致追踪状态变化变得非常困难。

使用状态管理库（如 Vuex）可以帮助我们解决这些问题。它们提供了一个中央存储库来存储应用程序的状态，使得状态变得更加可追踪和可维护。它们还提供了一些工具，如 mutations和 actions，使得状态更新和异步操作变得更加简单和可控。

另外，使用状态管理库还可以提高代码的可重用性和可测试性，使得开发更加高效和稳定。因此，在构建大型应用程序时，使用状态管理库是一个很好的选择。

Vue.js 提供了一个称为 Vuex 的官方状态管理库，用于在大型应用程序中管理应用程序的状态。它使用一个单一的全局状态树来管理整个应用程序的状态，并通过组件之间的明确定义的规则来修改和更新状态。

Vuex 可以让你在应用程序的各个组件之间共享状态，同时提供了一些方便的工具来管理这些状态。它由以下几个核心概念组成：

• state：应用程序的状态存储在一个单一的、可预测的状态树中。
• getters：用于从状态树中获取数据，类似于组件中的计算属性。
• mutations：是唯一允许更改状态的途径，保证了状态的可追溯性和可维护性。
• actions：类似于 mutations，但是可以执行异步操作，并且可以触发 mutations。

通过组合这些概念，Vuex 可以提供强大的状态管理功能，使得在大型应用程序中管理状态变得更加简单和可维护。

本文主要介绍vuex，如果需要使用pinia可以查看这篇文章

vuex与pinia对比

详细了解Vuex

state

Vuex 中的 state 是应用程序的状态存储位置。它表示应用程序的所有数据，可以被任何组件使用和修改。状态应该是可预测的，这意味着所有组件都应该能够使用相同的状态。这可以通过在应用程序的根目录中创建一个单一的状态树来实现。

在使用 Vuex 时，我们将状态树定义为一个对象。例如，我们可以定义一个包含用户信息的状态对象：

const state = {
  user: {
    name: 'John',
    age: 30,
    email: '[email protected]'
  }
}

在这个例子中，我们定义了一个名为 state 的对象，其中包含一个名为 user 的对象。这个 user 对象包含了三个属性：name、age 和 email。

getters

Vuex 中的 getters 类似于计算属性。它们用于从状态中获取数据，但是与直接访问状态不同，它们可以进行计算和过滤。

Vuex 的 getters 有两个参数：state 和 getters。state 参数是当前状态对象，getters 参数是一个对象，其中包含了所有的 getters。

下面是一个示例 getter，用于获取用户的全名：

const getters = {
  fullName: (state) => {
    return `${state.user.firstName} ${state.user.lastName}`
  }
}

在这个例子中，我们定义了一个名为 fullName 的 getter，它从 state 参数中获取了 user 对象，并返回用户的全名。我们可以在组件中使用 this.$store.getters.fullName 来获取用户的全名。

mutations

在 Vuex 中，mutations 是唯一允许更改状态的途径。它们是同步函数，用于修改状态。mutations 接受两个参数：state 和 payload。

state 参数是当前状态对象，payload 参数是一个包含任意数据的对象，用于将数据传递给 mutation。

下面是一个示例 mutation，用于将用户的年龄加 1：

const mutations = {
  incrementAge: (state) => {
    state.user.age++
  }
}

在这个例子中，我们定义了一个名为 incrementAge 的 mutation，它从 state 参数中获取了 user 对象，并将用户的年龄加 1。我们可以在组件中使用 this.$store.commit('incrementAge') 来调用这个 mutation。

actions

在 Vuex 中，actions 类似于 mutations，但是它们可以执行异步操作，并且可以触发 mutations。actions 用于处理异步数据，例如从 API 中获取数据，并在数据返回后触发 mutation 来更新状态。

actions 接受一个名为 context 的参数，它包含了与 mutations 相同的方法，但是它还包含了一个名为 commit 的方法，用于触发 mutation。

下面是一个示例 action，用于异步获取用户信息：

const actions = {
  getUserInfo: async ({ commit }) => {
    const response = await fetch('https://api.example.com/user')
    const userInfo = await response.json()
    commit('setUserInfo', userInfo)
  }
}

在这个例子中，我们定义了一个名为 getUserInfo 的 action，它从 API 中异步获取用户信息，并在获取到信息后使用 commit 方法触发 setUserInfo mutation 来更新状态。

我们可以在组件中使用 this.$store.dispatch('getUserInfo') 来调用这个 action。

模块化

随着应用程序的规模增大，状态树也会变得越来越复杂。Vuex 允许我们将状态树拆分成多个模块，每个模块都有自己的 state、getters、mutations 和 actions。

下面是一个示例模块，用于管理用户信息：

const userModule = {
  state: {
    user: {
      name: 'John',
      age: 30,
      email: '[email protected]'
    }
  },
  getters: {
    fullName: (state) => {
      return `${state.user.firstName} ${state.user.lastName}`
    }
  },
  mutations: {
    incrementAge: (state) => {
      state.user.age++
    }
  },
  actions: {
    getUserInfo: async ({ commit }) => {
      const response = await fetch('https://api.example.com/user')
      const userInfo = await response.json()
      commit('setUserInfo', userInfo)
    }
  }
}

在这个例子中，我们定义了一个名为 userModule 的模块，其中包含了状态、getters、mutations 和 actions。我们可以在应用程序的根模块中导入这个模块：

import Vue from 'vue'
import Vuex from 'vuex'
import userModule from './user-module'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user: userModule
  }
})

在这个例子中，我们将 userModule 导入并将其作为 user 模块添加到 Vuex 的 store 中。

这种模块化的方法可以帮助我们更好地组织和管理应用程序的状态，使得应用程序更加可维护和可扩展。

在vue3中使用vuex

Vue 3 中的 Vuex 的使用方式与 Vue 2 中有所不同，主要是在创建和使用 store 实例时有所变化。下面是一个简单的示例：

1. 安装 Vuex：在项目目录下执行 npm install vuex 命令来安装 Vuex。
2. 创建 store 实例：在 src/store/index.js 文件中创建 store 实例。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

在这个例子中，我们使用 createStore 函数来创建一个包含状态和变更状态的 mutations 的 store 实例。state 对象包含一个名为 count 的计数器。increment mutation 将 count 加 1。

3. 在 main.js 中注册 store：在 src/main.js 文件中，注册并使用 store 实例。

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

在这个例子中，我们将 store 实例注册为 Vue 应用程序的插件，并在根组件上使用它。

4. 在组件中使用状态：在组件中使用 $store 对象来访问状态。

在这个例子中，我们使用 $store.state 访问 count 状态，并使用 $store.commit 方法调用 increment mutation。

这是一个简单的示例，但它演示了 Vuex 在 Vue 3 中的基本用法。在实际应用程序中，我们可以使用 getters 和 actions 来进一步组织和管理状态。

相关文章

vuex的五个属性及使用方法