Vuex快速入门

1. 概述

Vuex是一个用于Vue.js应用程序的状态管理模式和库。它作为应用程序中所有组件的集中存储，允许它们以可预测和一致的方式访问和更新状态（当然，现在更推荐使用Pinia：Pinia | The intuitive store for Vue.js (vuejs.org)）

Vuex遵循单向数据流，其中状态存储在名为“store”的单一真相源中。组件可以使用getter访问状态，并可以通过提交mutation来更新状态。可以使用action执行异步操作并提交mutation

使用Vuex的主要优点包括：

1. 集中状态：Vuex提供了一个集中的状态管理解决方案，更容易跟踪和管理应用程序的状态

2. 可预测的状态变化：Vuex中的mutation是同步事务，确保状态变化是可预测和易于调试的

3. 组件通信：Vuex允许组件通过访问存储中的共享状态来进行通信，消除了复杂且容易出错的属性传递或事件触发的需求

4. Devtools集成：Vuex与Vue Devtools集成，提供状态变化的可视化表示，更容易调试和检查应用程序的状态

总体而言，Vuex简化了Vue.js应用程序中的状态管理，并促进了更结构化和可扩展的架构

本文主要介绍Vuex的一些概念以及基础使用

2. 基础概念

2.1 基础示例

下面是Vuex官网示例的最简Vuex示例：

import { createApp } from 'vue'
import { createStore } from 'vuex'
 
// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
 
const app = createApp({ /* 根组件 */ })
 
// 将 store 实例作为插件安装
app.use(store)

步骤很简单：

• 创建一个 store 实例，即调用函数createStore()
• 将 store 实例注入到Vue实例中，即createApp()之后调用函数app.use(store)

接下来解释两个问题：

• 创建一个 store 实例所传入的参数是什么意思（比如，state）？
• 如何在在其他地方使用 store 实例（比如，其他vue组件）？

2.2 概念解释

Vuex包含一些基本的概念，如state（状态）、mutations（变化）、actions（动作）和getters（获取器）。以下是这些基本概念的简要介绍：

1. State（状态）： State是应用程序中需要集中管理的数据状态。在Vuex中，所有的状态都被存储在一个单一的状态树中。可以将state视为应用程序的数据中心，它包含了所有的状态信息
2. Mutations（变化）： Mutations是用于修改状态的方法。每个mutation都有一个字符串类型的事件类型（type）和一个回调函数（handler）。在mutation中，我们可以对状态进行同步修改，确保状态变化是可预测的
3. Actions（动作）： Actions用于提交mutation，而不是直接变更状态。它可以包含任意异步操作。通过提交mutation，可以间接地改变状态。Actions的主要作用是处理异步操作，例如从服务器获取数据或进行复杂的计算
4. Getters（获取器）： Getters允许我们在store中派生出一些状态，类似于计算属性。它可以对state进行一些包装，从而可以在组件中方便地获取和使用这些派生状态

说的直白点就是：

• State用于声明变量、存放变量，这个变量是响应式的
• Mutations用于声明函数、存放函数，这个函数通常是用来修改State中的变量，且通常为同步函数
• Actions用于声明函数、存放函数，这个函数通常是用来修改State中的变量，且通常为异步函数
• Getters用于使用由State所派生的数据，就是对State中的变量做个拦截处理

如果项目很大，代码很多，一个Store需要存放很多的数据，不易区分，如何解决？所以Vuex还有一个概念modules

在Vuex中，modules是一种将store分割成模块化结构的方式。它可以让我们将大型的store拆分成多个小的模块，每个模块都有自己的state、mutations、actions和getters。这样可以使得应用程序的状态管理更加灵活和可维护，例如：

const store = new Vuex.Store({
  modules: {
    moduleA: {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    },
    moduleB: {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
  }
})

2.3 如何使用

因为 store 实例已经注入到Vue根组件里，在 Vue 组件中， 可以通过 this.$store 访问 store 实例

访问State中的变量：

this.$store.state.count // 获取state中的count数据

访问Mutations、Actions中的函数：

this.$store.commit('increment'); // 提交名为increment的mutation
this.$store.dispatch('incrementAsync'); // 分发名为incrementAsync的action

访问Getters中的变量（函数）：

this.$store.getters.doubleCount; // 通过getter获取处理后的数据

3. 常用示例

在Vue3中，常常使用 setup 语法糖，这就难以使用 this.$store 变量了，再者就是，如果能使用导入导出的方式，更符合工程化开发

所以，通常会将 store 实例封装为一个文件并 export ，在需要使用的文件里，再 import，示例如下：

在一个新的JS文件中创建Store实例：

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  state: {
    count: 0
  }
})
export default store

在Vue实例中（通常就是Vue项目最外层的main.js），注入store

// 1. 导入store
import store from '@/store' 
 
new Vue({
  // 省略其他...
  store // 2. 注入Vue实例
})

在Vue组件中，使用store：

import store from '@/store';
 
export default {
  name: 'MyComponent',
  computed: {
    count() {
      return store.getters.getCount;
    }
  },
  methods: {
    increment() {
      store.commit('increment');
    },
    incrementAsync() {
      store.dispatch('incrementAsync');
    }
  }
}

4. 参考资料

[1] Vuex 是什么？ | Vuex (vuejs.org)

[2] vue中使用vuex(超详细) - 掘金 (juejin.cn)