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

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

Vuex 的核心概念

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

Vuex 的核心概念包括：

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

Vuex 的基本结构

使用 Vue CLI 创建项目时，如果选择使用 Vuex，会自动生成以下结构：

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

State 的使用

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

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

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

Getter 的使用

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

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

Mutation 的使用

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

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

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

Action 的使用

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

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

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

Module 的使用

Vuex 支持模块化管理，例如：

// src/store/products.js
const 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.js
import 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/