Vuex 入门：玩转 Vue3 中的状态管理

前端

2022-12-24 21:17:03

Vuex：Vue.js 中的状态管理利器

在单页面应用 (SPA) 的世界中，共享状态是不可避免的。Vuex 是 Vue.js 的官方状态管理库，旨在简化这一过程，让您轻松管理应用中的共享状态。本文将深入探讨 Vuex，介绍其基本概念和使用方法，帮助您掌握这门强大工具。

## 什么是状态管理？

状态管理是一种组织和管理共享状态的实践，使多个组件能够访问和更新这些状态。在传统方法中，共享状态通常存储在全局变量中，但这会带来维护困难、可测试性差和可重用性差等问题。

Vuex 通过提供一个集中式存储库来解决这些问题，该存储库包含所有共享状态。这使得状态管理更加清晰、可预测和可管理。

## Vuex 的核心组件

Vuex 由以下核心组件组成：

Store： 应用的状态容器，存储所有共享状态。
Actions： 用于提交 mutations 的函数，封装状态更改的逻辑。
Mutations： 唯一允许修改 store 中状态的函数，确保状态更改的可预测性。
Getters： 用于从 store 中派生状态的函数，提供一种计算或格式化状态的方式。

## 使用 Vuex

创建 Store

创建 store 是使用 Vuex 的第一步。您可以使用 Vuex.Store 构造函数来创建 store：

import Vuex from 'vuex'

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

在组件中使用 Store

在组件中访问 store，可以使用 $store 属性：

<template>
  <div>{{ $store.state.count }}</div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

提交 Mutations

使用 $store.commit() 方法提交 mutations：

this.$store.commit('increment')

使用 Getters

使用 $store.getters 属性访问 getters：

<template>
  <div>{{ $store.getters.countText }}</div>
</template>

<script>
export default {
  computed: {
    countText() {
      return this.$store.getters.countText
    }
  }
}
</script>