vuex-vue2

何时使用此技能

当用户希望进行以下操作时，使用此技能：

• 在 Vue 2 项目中安装和设置 Vuex
• 使用 Vuex 管理应用状态
• 在 Vue 组件中使用 Vuex store
• 了解 Vuex 核心概念（state、getters、mutations、actions）
• 在大型应用中使用 Vuex 模块
• 使用 Vuex 插件和开发者工具
• 了解 Vuex API 和方法
• 排查 Vuex 问题

如何使用此技能

此技能的组织结构与 Vuex 官方文档一致（https://vuex.vuejs.org/zh/、https://vuex.vuejs.org/zh/guide/、https://vuex.vuejs.org/zh/api/）。使用 Vuex 时：

1. 确定主题，根据用户的请求选择：

   • 安装/安装 → examples/guide/installation.md
   • 快速开始/快速开始 → examples/guide/quick-start.md
   • 核心概念/核心概念 → examples/core-concepts/
   • 高级/高级 → examples/advanced/
   • API/API 文档 → api/

2. 从 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 - State
   • examples/core-concepts/getters.md - Getters
   • examples/core-concepts/mutations.md - Mutations
   • examples/core-concepts/actions.md - Actions
   • examples/core-concepts/modules.md - Modules

   高级（高级）：

   • examples/advanced/plugins.md - 插件
   • examples/advanced/strict-mode.md - 严格模式
   • examples/advanced/form-handling.md - 表单处理
   • examples/advanced/testing.md - 测试
   • examples/advanced/hot-reload.md - 热重载

3. 遵循相应示例文件中的具体说明，了解语法、结构和最佳实践

   重要说明：

   • Vuex 适用于 Vue 2.x
   • Store 是集中式状态管理的核心
   • State 是响应式的
   • Mutations 是同步的
   • Actions 是异步的
   • 每个示例文件都包含核心概念、代码示例和要点

4. 需要时参考 api/ 目录中的 API 文档：

   • api/store-api.md - Store API
   • api/state-api.md - State API
   • api/getters-api.md - Getters API
   • api/mutations-api.md - Mutations API
   • api/actions-api.md - Actions API
   • api/modules-api.md - Modules API
   • api/plugins-api.md - Plugins API

5. 使用 templates/ 目录中的模板：

   • templates/installation.md - 安装模板
   • templates/store-setup.md - Store 设置模板
   • templates/component-usage.md - 组件用法模板

1. 了解 Vuex

Vuex 是适用于 Vue.js 应用的状态管理模式和库。它作为应用中所有组件的集中式 store。

核心概念：

• Store：集中式状态容器
• State：应用状态（数据）
• Getters：store 的计算属性
• Mutations：同步状态变更
• Actions：异步操作
• Modules：store 组织方式

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/）：

Store API (api/store-api.md)

• Store 构造函数选项
• Store 实例属性
• Store 实例方法

State API (api/state-api.md)

• State 定义
• State 访问
• State 响应性

Getters API (api/getters-api.md)

• Getter 定义
• Getter 访问
• Getter 参数

Mutations API (api/mutations-api.md)

• Mutation 定义
• Mutation 提交
• Mutation 负载

Actions API (api/actions-api.md)

• Action 定义
• Action 分发
• Action 上下文

Modules API (api/modules-api.md)

• Module 定义
• Module 命名空间
• Module 注册

Plugins API (api/plugins-api.md)

• Plugin 定义
• Plugin 用法
• 内置插件

使用 API 参考：

1. 确定需要帮助的 API
2. 从 api/ 目录加载对应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接的示例文件，了解详细用法模式
5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 同步变更使用 mutations：Mutations 必须是同步的
2. 异步操作使用 actions：Actions 可以包含异步操作
3. 保持 state 规范化：避免嵌套的 state 结构
4. 大型应用使用 modules：使用 modules 组织 store
5. 派生状态使用 getters：通过 getters 派生 state
6. 遵循命名约定：使用一致的命名模式
7. 使用 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 store, Vuex state, Vuex getters, Vuex mutations, Vuex actions, Vuex modules, Vuex plugins, 集中式状态, 响应式状态, 同步 mutations, 异步 actions