深入理解 Vuex：让状态管理轻而易举

前端

2023-11-25 17:30:40

Vuex：让 Vue.js 状态管理变得轻松

当我们在 Vue.js 项目中处理复杂的逻辑和状态时，Vuex 作为状态管理库，脱颖而出。它提供了强大的工具，使我们能够集中管理应用程序的共享状态，简化大型项目，提高可维护性和可测试性。

核心概念

状态： Vuex 围绕一个中心化存储的概念，称为状态。它包含了应用程序所有组件都可以访问和修改的共享数据。

动作： 动作是执行状态更改的函数。它们从组件触发，并包含与服务器通信、更新本地数据等异步操作。

变更： 变更是对状态的更改，由动作触发。

模块： 模块将大型状态对象分解为更小的、可管理的部分。它们允许我们对状态进行分块和组织，并单独管理不同组件所需的数据。

入门

安装：

npm install vuex

准备示例组件：
我们创建两个组件，add.vue 和 sub.vue，以展示 Vuex 的作用：

add.vue：

<template>
  <button @click="increment">+</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['increment']),
  },
}
</script>

sub.vue：

<template>
  <button @click="decrement">-</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['decrement']),
  },
}
</script>

store.js：
2.1 - 访问共享状态（不推荐）：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {
    count(state) {
      return state.count
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement({ commit }) {
      commit('decrement')
    },
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
})

灵活运用 Vuex

模块化：

// store.js

export default new Vuex.Store({
  modules: {
    counter: {
      state: {
        count: 0,
      },
      getters: {
        count(state) {
          return state.count
        },
      },
      actions: {
        increment({ commit }) {
          commit('increment')
        },
        decrement({ commit }) {
          commit('decrement')
        },
      },
      mutations: {
        increment(state) {
          state.count++
        },
        decrement(state) {
          state.count--
        },
      },
    },
  },
})

严谨的测试：
单元测试 Vuex 模块非常重要，可以使用 Vue Test Utils 或 Mocha 等库进行测试。