Provides comprehensive guidance for Vuex 2.x state management in Vue 2 applications including state, mutations, actions, getters, modules, and plugins. Use when the user asks about Vuex for Vue 2, needs to manage state in Vue 2 applications, or implement Vuex patterns.
Use this skill whenever the user wants to:
This skill is organized to match the Vuex official documentation structure (https://vuex.vuejs.org/zh/, https://vuex.vuejs.org/zh/guide/, https://vuex.vuejs.org/zh/api/). When working with Vuex:
Identify the topic from the user's request:
examples/guide/installation.mdexamples/guide/quick-start.mdexamples/core-concepts/examples/advanced/api/Load the appropriate example file from the examples/ directory:
Guide (使用指南):
examples/guide/intro.md - Introduction to Vuexexamples/guide/installation.md - Installation guideexamples/guide/quick-start.md - Quick start guideexamples/guide/what-is-vuex.md - What is VuexCore Concepts (核心概念):
examples/core-concepts/state.md - Stateexamples/core-concepts/getters.md - Gettersexamples/core-concepts/mutations.md - Mutationsexamples/core-concepts/actions.md - Actionsexamples/core-concepts/modules.md - ModulesAdvanced (高级):
examples/advanced/plugins.md - Pluginsexamples/advanced/strict-mode.md - Strict modeexamples/advanced/form-handling.md - Form handlingexamples/advanced/testing.md - Testingexamples/advanced/hot-reload.md - Hot reloadFollow the specific instructions in that example file for syntax, structure, and best practices
Important Notes:
Reference API documentation in the api/ directory when needed:
api/store-api.md - Store APIapi/state-api.md - State APIapi/getters-api.md - Getters APIapi/mutations-api.md - Mutations APIapi/actions-api.md - Actions APIapi/modules-api.md - Modules APIapi/plugins-api.md - Plugins APIUse templates from the templates/ directory:
templates/installation.md - Installation templatestemplates/store-setup.md - Store setup templatestemplates/component-usage.md - Component usage templatesVuex is a state management pattern and library for Vue.js applications. It serves as a centralized store for all the components in an application.
Key Concepts:
Using npm:
npm install vuex@3
Using yarn:
yarn add vuex@3
Using CDN:
<script src="https://unpkg.com/vuex@3"></script>
// 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/ or examples/getting-started/ → https://vuex.vuejs.org/zh/guide/api/ → https://vuex.vuejs.org/zh/api/This skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).
To use examples:
To use templates:
templates/ directory for common scaffoldingDetailed API documentation is available in the api/ directory, organized to match the official Vuex API documentation structure (https://vuex.vuejs.org/zh/api/):
api/store-api.md)api/state-api.md)api/getters-api.md)api/mutations-api.md)api/actions-api.md)api/modules-api.md)api/plugins-api.md)To use API reference:
api/ directoryexamples/ directoryVuex, vuex, Vue 2, state management, 状态管理, store, state, getters, mutations, actions, modules, 存储, 状态, 获取器, 变更, 动作, 模块, Vuex store, Vuex state, Vuex getters, Vuex mutations, Vuex actions, Vuex modules, Vuex plugins, centralized state, reactive state, synchronous mutations, asynchronous actions
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。