Vuex 状态管理

Vue 极速入门 第 15 节：Vuex 状态管理：从基础到高级应用

引言

Vuex 是 Vue.js 官方推荐的状态管理库，专为复杂应用设计。它通过集中式存储管理应用的所有组件的状态，并提供可预测的状态管理机制。本文将带你从 Vuex 的基础概念到高级应用，全面掌握 Vuex 的使用技巧。

---

1. Vuex 核心概念：State、Getters、Mutations、Actions

1.1 什么是 Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.2 Vuex 的核心概念

Vuex 的核心概念包括：

• State：驱动应用的数据源。
• Getters：从 State 中派生出一些状态。
• Mutations：更改 State 的唯一方法。
• Actions：提交 Mutations，而不是直接变更状态。

如下案例展示了在 Vue3 项目中如何使用 Vuex，注意：Vue2/3 使用区别不大，后续案例程序都以此使用步骤为基础对案例程序展开介绍。

目录结构

project/
├── src/
│   ├── store/
│   │   └── index.js
│   ├── main.js
│   ├── App.vue
│   └── components/
│       └── Counter.vue
├── index.html
└── package.json

文件解释：

• store/index.js：Vuex 状态管理文件。
• main.js：Vue 应用的入口文件，集成 Vuex。

store/index.js

import {
    createStore } from 'vuex';

export default createStore({
   
  state: {
   
    count: 0
  },
  getters: {
   
    doubleCount: (state) => state.count * 2
  },
  mutations: {
   
    increment(state) {
   
      state.count++;
    }
  },
  actions: {
   
    increment({
     commit }) {
   
      commit('increment');
    }
  }
});

main.js

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

createApp(App).use(store).mount('#app');

---

1.3 使用 Vuex 的组件

在使用 Vuex 之前，请先打开 Vue 项目所在根目录下输入指令进行安装：

# Vue2 项目
npm install vuex@3

# Vue3 项目
npm install vuex@4

目录结构