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

博主： xiaoxiao
发布时间：2023 年 04 月 30 日
875 次浏览
暂无评论
5369字数
分类： Vue 笔记 JavaScript 前端

# 为什么要使用状态管理

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

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

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

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

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

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

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

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

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

<div class="inner-content" >
<p class="inser-title">Vue3使用Pinia</p>
<div class="inster-summary text-muted">
什么是piniaPinia 是一个轻量级、直观和可扩展的状态管理库，专为 Vue 3 设计。它提供了一个响应式的状...
</div>
</div>
</a>

</div>

</div>

vuex与pinia对比

<div class="inner-content" >
<p class="inser-title">vue3中vuex对比pinia</p>
<div class="inster-summary text-muted">
介绍下面两篇文章详细介绍了vuex和pinia，如有需要可查看对比在 Vue 3 中，Vuex 和 Pinia 都...
</div>
</div>
</a>

</div>

</div>

# 详细了解Vuex

## state

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

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

```javascript
const state = {
  user: {
    name: 'John',
    age: 30,
    email: 'john@example.com'
  }
}
```

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

## getters

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

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

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

```javascript
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：

```javascript
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，用于异步获取用户信息：

```javascript
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。

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

```javascript
const userModule = {
  state: {
    user: {
      name: 'John',
      age: 30,
      email: 'john@example.com'
    }
  },
  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。我们可以在应用程序的根模块中导入这个模块：

```javascript
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 实例。

```javascript
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 实例。

```javascript
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` 对象来访问状态。

```vue
<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>
```

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

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

# 相关文章

<a class="post_link" href="https://www.xxhzm.cn/archives/788/"><i data-feather="file-text"></i>vuex的五个属性及使用方法</a>