本文共 3711 字，大约阅读时间需要 12 分钟。
Vuex 是 Vue.js 生态系统中专门设计的状态管理库，旨在帮助开发者高效地管理组件间共享的状态。它通过集中式的状态管理方式，确保状态变化具有可预测性和可追溯性。Vuex 的核心目标是解决复杂组件间数据共享和状态管理的问题。
Vuex 的工作原理可以用以下流程来描述：
Vuex 的核心概念包括：
使用 Vue CLI 创建项目时，如果选择使用 Vuex，会自动生成以下结构：
// src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {}}) // src/main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({ router, store, render: h => h(App)}).$mount('#app') Vuex 提供了 State 的响应式特性，使组件可以直接通过 $store.state 访问全局状态。例如：
// src/store/index.jsexport default new Vuex.Store({ state: { count: 0, msg: 'Hello Vuex' }}) Vuex - demo
count: {{ $store.state.count }} msg: {{ $store.state.msg }}
Vuex 提供了 mapState 函数，将状态映射为计算属性：
Getter 可以对 State 的数据进行处理，例如：
// src/store/index.jsexport default new Vuex.Store({ getters: { reverseMsg(state) { return state.msg.split('').reverse().join('') } }}) Vuex - demo
reverseMsg: {{ $store.getters.reverseMsg }}
Mutation 是同步操作，用于修改状态。例如：
// src/store/index.jsexport default new Vuex.Store({ mutations: { increate(state, payload) { state.count += payload } }}) Vuex - demo
Vuex 提供了 mapMutations 将 Mutation 映射到组件方法中：
Action 可以执行异步操作，例如：
// src/store/index.jsexport default new Vuex.Store({ actions: { increateAsync(context, payload) { setTimeout(() => { context.commit('increate', payload) }, 1000) } }}) Vuex - demo
Vuex 提供了 mapActions 将 Action 映射到组件方法中：
Vuex 支持模块化管理，例如：
// src/store/products.jsconst state = { products: [ { id: 1, title: 'iPhone 11', price: 8000 }, { id: 1, title: 'iPhone 12', price: 10000 } ]}const getters = { productCount(state) { return state.products.length }}const mutations = { setProducts(state, payload) { state.products = payload }}export default { state, getters, mutations} // src/store/index.jsimport Vuex from 'vuex'import products from './products'import cart from './cart'Vue.use(Vuex)export default new Vuex.Store({ state: { count: 0, msg: 'Hello Vuex' }, getters: { reverseMsg(state) { return state.msg.split('').reverse().join('') } }, mutations: { increate(state, payload) { state.count += payload } }, actions: { increateAsync(context, payload) { setTimeout(() => { context.commit('increate', payload) }, 1000) } }, modules: { products, cart }}) Vuex 提供了严格模式，禁止在组件中直接修改 State：
export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production'}) 在严格模式下，直接修改 State 会抛出错误：
Vuex - demo
{{ $store.state.msg }}
Vuex 插件可以扩展其功能，例如购物车记录：
const myPlugin = store => { store.subscribe((mutation, state) => { // 每次 mutation 完成后执行 console.log('状态变更', mutation, state) })} Vuex 是 Vue.js 应用中状态管理的最佳选择，适用于大型单页应用项目。通过集中式管理状态，组件间的数据共享和状态变更可以更加高效和可控。Vuex 提供了丰富的功能，包括时光旅行、严格模式、模块化和插件系统等，帮助开发者构建高效且可维护的应用。
转载地址：http://dfzp.baihongyu.com/