Vuex概述与使用指南：深入浅出，从入门到精通

前端

2023-11-13 07:28:25

前言：Vuex 概览

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的一致性和可预测性。Vuex 遵循单向数据流的原则，即组件只能通过触发事件来修改状态，而不能直接修改状态。

Vuex 的核心概念

1. 状态（State）

状态是 Vuex 的核心概念，它是一个包含应用程序所有数据的对象。状态是响应式的，这意味着当状态发生变化时，所有依赖它的组件都会重新渲染。

2. 变更（Mutations）

变更（Mutations）是用来修改状态的唯一方法。Mutations 是同步的，这意味着它们会立即修改状态。Mutations 必须是纯函数，即它们不应产生副作用，也不应依赖任何外部状态。

3. 动作（Actions）

动作（Actions）是用来触发变更的函数。动作可以是异步的，这意味着它们可以执行一些耗时的操作，比如从服务器获取数据。动作不能直接修改状态，它们只能通过触发变更来修改状态。

4. 访问器（Getters）

访问器（Getters）是用来从状态中派生出新的数据的函数。访问器是纯函数，这意味着它们不应产生副作用，也不应依赖任何外部状态。访问器可以被组件用来获取派生数据，而不必直接访问状态。

5. 模块（Modules）

模块（Modules）是将 Vuex 状态、变更、动作和访问器组织成独立单元的一种方式。模块可以被用来将应用程序的状态和逻辑划分为更小的部分，从而提高应用程序的可维护性和可扩展性。

Vuex 的使用

1. 安装 Vuex

在使用 Vuex 之前，您需要先安装它。您可以使用 npm 或 yarn 来安装 Vuex：

npm install vuex

yarn add vuex

2. 创建 Vuex 实例

在安装 Vuex 之后，您需要创建一个 Vuex 实例。您可以通过创建一个新的 Vuex.Store 实例来创建 Vuex 实例：

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  },
  modules: {
    // ...
  }
})

3. 将 Vuex 实例注入 Vue.js 应用程序

在创建了 Vuex 实例之后，您需要将它注入 Vue.js 应用程序。您可以通过在 Vue.js 根实例中使用 store 选项来注入 Vuex 实例：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

4. 使用 Vuex

在将 Vuex 实例注入 Vue.js 应用程序之后，您就可以在组件中使用 Vuex 了。您可以使用 mapState()、mapMutations()、mapActions() 和 mapGetters() 助手来将 Vuex 的状态、变更、动作和访问器映射到组件的计算属性和方法。

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState([
      'count'
    ]),
    ...mapGetters([
      'doubleCount'
    ])
  },
  methods: {
    ...mapMutations([
      'increment'
    ]),
    ...mapActions([
      'incrementAsync'
    ])
  }
}