name: vuex-vue2 description: 提供Vuex 2.x在Vue 2应用程序中状态管理的全面指导，包括状态、突变、动作、获取器、模块和插件。当用户询问关于Vue 2的Vuex、需要在Vue 2应用程序中管理状态或实现Vuex模式时使用。 license: 完整条款见LICENSE.txt

何时使用此技能

使用此技能当用户想要：

在Vue 2项目中安装和设置Vuex
使用Vuex管理应用程序状态
在Vue组件中使用Vuex存储
理解Vuex核心概念（状态、获取器、突变、动作）
为大型应用程序使用Vuex模块
处理Vuex插件和开发者工具
理解Vuex API和方法
解决Vuex问题

如何使用此技能

此技能组织为匹配Vuex官方文档结构（https://vuex.vuejs.org/zh/, https://vuex.vuejs.org/zh/guide/, https://vuex.vuejs.org/zh/api/）。当使用Vuex时：

识别主题 从用户的请求中：
- 安装/安装 → examples/guide/installation.md
- 快速开始/快速开始 → examples/guide/quick-start.md
- 核心概念/核心概念 → examples/core-concepts/
- 高级/高级 → examples/advanced/
- API/API 文档 → api/
加载适当的示例文件 从 examples/ 目录：

指南（使用指南）:
- examples/guide/intro.md - Vuex介绍
- examples/guide/installation.md - 安装指南
- examples/guide/quick-start.md - 快速开始指南
- examples/guide/what-is-vuex.md - 什么是Vuex
核心概念（核心概念）:
- examples/core-concepts/state.md - 状态
- examples/core-concepts/getters.md - 获取器
- examples/core-concepts/mutations.md - 突变
- examples/core-concepts/actions.md - 动作
- examples/core-concepts/modules.md - 模块
高级（高级）:
- examples/advanced/plugins.md - 插件
- examples/advanced/strict-mode.md - 严格模式
- examples/advanced/form-handling.md - 表单处理
- examples/advanced/testing.md - 测试
- examples/advanced/hot-reload.md - 热重载
遵循特定指令 在那个示例文件中，用于语法、结构和最佳实践

重要注意事项:
- Vuex用于Vue 2.x
- 存储是中心化的状态管理
- 状态是响应式的
- 突变是同步的
- 动作是异步的
- 每个示例文件包括关键概念、代码示例和要点
参考API文档 在 api/ 目录中，当需要时：
- api/store-api.md - 存储API
- api/state-api.md - 状态API
- api/getters-api.md - 获取器API
- api/mutations-api.md - 突变API
- api/actions-api.md - 动作API
- api/modules-api.md - 模块API
- api/plugins-api.md - 插件API
使用模板 从 templates/ 目录：
- templates/installation.md - 安装模板
- templates/store-setup.md - 存储设置模板
- templates/component-usage.md - 组件使用模板

1. 理解Vuex

Vuex是Vue.js应用程序的状态管理模式和库。它作为应用程序中所有组件的中心化存储。

关键概念:

存储: 中心化状态容器
状态: 应用程序状态（数据）
获取器: 存储的计算属性
突变: 同步状态变化
动作: 异步操作
模块: 存储组织

2. 安装

使用npm:

npm install vuex@3

使用yarn:

yarn add vuex@3

使用CDN:

<script src="https://unpkg.com/vuex@3"></script>

3. 基本设置

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

// main.js
import Vue from 'vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

文档映射（与官方文档一一对应）

examples/guide/ 或 examples/getting-started/ → https://vuex.vuejs.org/zh/guide/
api/ → https://vuex.vuejs.org/zh/api/

示例和模板

此技能包括详细示例，组织为匹配官方文档结构。所有示例都在 examples/ 目录中（见上方映射）。

使用示例:

从用户的请求中识别主题
从上方的映射中加载适当的示例文件
遵循该文件中的指令、语法和最佳实践
根据您的特定用例调整代码示例

使用模板:

参考 templates/ 目录中的模板进行常见脚手架
根据您的特定需求和编码风格调整模板

API 参考

详细API文档在 api/ 目录中可用，组织为匹配官方Vuex API文档结构（https://vuex.vuejs.org/zh/api/）：

存储API（`api/store-api.md`）

存储构造函数选项
存储实例属性
存储实例方法

状态API（`api/state-api.md`）

状态定义
状态访问
状态响应性

获取器API（`api/getters-api.md`）

获取器定义
获取器访问
获取器参数

突变API（`api/mutations-api.md`）

突变定义
突变提交
突变负载

动作API（`api/actions-api.md`）

动作定义
动作分发
动作上下文

模块API（`api/modules-api.md`）

模块定义
模块命名空间
模块注册

插件API（`api/plugins-api.md`）

插件定义
插件使用
内置插件

使用API参考:

识别您需要帮助的API
从 api/ 目录加载相应的API文件
查找API签名、参数、返回类型和示例
参考链接的示例文件以获取详细使用模式
所有API文件包括指向 examples/ 目录中相关示例文件的链接

最佳实践

使用突变进行同步更改: 突变必须是同步的
使用动作进行异步操作: 动作可以包含异步操作
保持状态规范化: 避免嵌套状态结构
为大型应用程序使用模块: 使用模块组织存储
使用获取器进行计算状态: 使用获取器派生状态
遵循命名约定: 使用一致的命名模式
使用TypeScript: 利用TypeScript进行类型安全

资源

官方文档: https://vuex.vuejs.org/zh/
指南: https://vuex.vuejs.org/zh/guide/
API 文档: https://vuex.vuejs.org/zh/api/
GitHub 仓库: https://github.com/vuejs/vuex

关键词

Vuex, vuex, Vue 2, 状态管理, store, state, getters, mutations, actions, modules, 存储, 状态, 获取器, 变更, 动作, 模块, Vuex存储, Vuex状态, Vuex获取器, Vuex突变, Vuex动作, Vuex模块, Vuex插件, 中心化状态, 响应式状态, 同步突变, 异步动作

何时使用此技能

如何使用此技能

1. 理解Vuex

2. 安装

3. 基本设置

文档映射（与官方文档一一对应）

示例和模板

API 参考

存储API（api/store-api.md）

状态API（api/state-api.md）

获取器API（api/getters-api.md）

突变API（api/mutations-api.md）

动作API（api/actions-api.md）

模块API（api/modules-api.md）

插件API（api/plugins-api.md）