Vuex详解

3/20/2022 框架vuevuex

# Vuex是什么?

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

# 什么是状态管理模式?

简单的理解就是统一集中管理和维护所有vue组件的可变化状态。

# 什么时候需要它?

当我们的应用很大状态很多,且多个页面都有共享使用同一状态时,这种情况下我们可以考虑使用Vuex可以更好的在组件外部去管理状态,Vuex 将会成为自然而然的选择。

# Vuex使用示例

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        getCount(state) {
            return state.count + 2;
        }
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        add (ctx, data) {
            ctx.commit('increment', data);
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Vuex的各个模块

  • state:用于存储数据,是store中的唯一数据源。

  • getters:如同vue组件中的计算属性,基于state的数据进行二次加工,常用于数据的筛选和多个数据的相关性进行计算。

  • mutations:用于存储对于state的修改同步方法,是修改state数据的唯一途径,且不能用于处理异步事件。

  • actions:类似于mutation,用于提交mutation来变更状态,而不能直接变更状态,可以包含任意异步操作。

  • modules:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护。

# 为什么要用Vuex,而不是全局维护一个全局变量?

  • 全局变量
  1. 无响应式,无法被监听。
  2. 可能出现命名污染。
  • vuex的优点
  1. 响应式的数据。
  2. 模块化,抽象业务逻辑,减少重复代码。
  3. 可以被vue-devtools跟踪操作。

# 疑问二三🤔️

  1. 为什么只能使用mutation来修改数据而不能使用action?

Vuex这一限制其实也是出于代码设计考虑,action和mutation各司其事,本质上也是遵守了“单一职责”原则。(具体细节课、可阅读源码进行分析理解)

  1. 为什么mutation只能处理同步事件,action处理异步事件。

主要是为了方便我们debug,如果项目比较大,复杂度较高,在开发过程中,我们一般会依赖vue-devtools进行调试,为了方便追踪,vuex的每一次提交mutation,当函数执行时都会被记录一次,所以要求mutation内只能存放同步事件,而如果存放的是异步事件的时候,函数执行vue-devtools记录了,但是事实上并没有得到最终的一个结果,导致记录的一个执行时间顺序就不对,导致一些意外情况增加调试难度。