木头的个人博客

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记录了，但是事实上并没有得到最终的一个结果，导致记录的一个执行时间顺序就不对，导致一些意外情况增加调试难度。