本文共 3711 字，大约阅读时间需要 12 分钟。

Vuex 是 Vue.js 生态系统中专门设计的状态管理库，旨在帮助开发者高效地管理组件间共享的状态。它通过集中式的状态管理方式，确保状态变化具有可预测性和可追溯性。Vuex 的核心目标是解决复杂组件间数据共享和状态管理的问题。

Vuex 的核心概念

Vuex 的工作原理可以用以下流程来描述：

Vuex 的核心概念包括：

• Store（仓库）：应用的核心，包含所有状态数据。
• State（状态）：响应式的状态存储，通过 DevTools 提供时光旅行功能。
• Getter（计算属性）：对 State 的数据进行处理，类似于计算属性。
• Mutation（状态变更）：同步操作，用于修改状态。
• Action（动作）：异步操作，用于执行 API 请求或其他任务。
• Module（模块）：通过模块划分功能模块的状态，提升代码维护性。

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')

State 的使用

Vuex 提供了 State 的响应式特性，使组件可以直接通过 $store.state 访问全局状态。例如：

// src/store/index.jsexport default new Vuex.Store({  state: {    count: 0,    msg: 'Hello Vuex'  }})

Vuex 提供了 mapState 函数，将状态映射为计算属性：

Getter 的使用

Getter 可以对 State 的数据进行处理，例如：

// src/store/index.jsexport default new Vuex.Store({  getters: {    reverseMsg(state) {      return state.msg.split('').reverse().join('')    }  }})

Mutation 的使用

Mutation 是同步操作，用于修改状态。例如：

// src/store/index.jsexport default new Vuex.Store({  mutations: {    increate(state, payload) {      state.count += payload    }  }})

Vuex 提供了 mapMutations 将 Mutation 映射到组件方法中：

Action 的使用

Action 可以执行异步操作，例如：

// src/store/index.jsexport default new Vuex.Store({  actions: {    increateAsync(context, payload) {      setTimeout(() => {        context.commit('increate', payload)      }, 1000)    }  }})

Vuex 提供了 mapActions 将 Action 映射到组件方法中：

Module 的使用

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 插件可以扩展其功能，例如购物车记录：

const myPlugin = store => {  store.subscribe((mutation, state) => {    // 每次 mutation 完成后执行    console.log('状态变更', mutation, state)  })}

总结

Vuex 是 Vue.js 应用中状态管理的最佳选择，适用于大型单页应用项目。通过集中式管理状态，组件间的数据共享和状态变更可以更加高效和可控。Vuex 提供了丰富的功能，包括时光旅行、严格模式、模块化和插件系统等，帮助开发者构建高效且可维护的应用。

转载地址：http://dfzp.baihongyu.com/