深入解析 Vuex：手把手搭建一个可运行的状态管理系统

前端

2023-09-12 11:56:03

深入理解 Vuex

Vuex 是一个专门为 Vue.js 应用程序设计的全局状态管理工具。它可以帮助您集中管理应用程序的状态，并让组件以一个可预测的方式访问和修改状态。

Vuex 的核心概念包括：

State： Vuex 中的 state 是一个包含应用程序状态的对象。
Mutations： Mutations 是用来修改 state 的方法。
Actions： Actions 是用来提交 mutations 的方法。
Getters： Getters 是用来从 state 中获取数据的函数。

手把手搭建一个可运行的状态管理系统

为了搭建一个可运行的状态管理系统，我们需要以下步骤：

安装 Vuex

使用 npm 或 yarn 安装 Vuex：

npm install vuex

或

yarn add vuex

创建 Vuex 实例

在应用程序中创建一个 Vuex 实例：

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

Vue.use(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
    }
  }
})

在组件中使用 Vuex

在组件中使用 Vuex，可以通过 mapState、mapMutations、mapActions 和 mapGetters 辅助函数：

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

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

在 HTML 中使用 Vuex

在 HTML 中使用 Vuex，可以通过 v-model 指令和 v-on 指令：

<div id="app">
  <p>Count: {{ count }}</p>
  <p>Double count: {{ doubleCount }}</p>
  <button @click="increment">Increment</button>
  <button @click="incrementAsync">Increment async</button>
</div>