本文共 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/