Vuex状态管理

作者: 翔子丶 | 来源:发表于2021-03-16 17:03 被阅读0次

Vuex状态管理模式
Vue知识总结(2)
vuex二次总结
Vue2技术栈归纳与精粹（下篇）
vuex状态管理：vuex
15-Vuex基础
Vue学习笔记（三）
vuex
vuex基础
vueX是什么？

什么是Vuex

Vuex 是专门为 Vue.js 设计的状态管理库
它采用集中式的方式存储需要共享的数据
从使用角度，它就是一个 JavaScript 库
它的作用是进行状态管理，解决复杂组件通信，数据共享
集成到 Vue 的官方调试工具 devtools，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

什么情况下使用Vuex

官方文档： Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：Flux 架构就像眼镜：您自会知道什么时候需要它。

当你的应用中具有以下需求场景的时候：

多个视图依赖同一状态
来自不同视图的行为需要变更同一状态

Vuex 不要滥用，不符合以上需求的业务不要使用，反而会让你的应用变得更麻烦

核心概念回顾

image-20210315195501466.png

基本结构

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

Vue.use(Vuex)
export default new Vuex.Store({
  modules: {},
  state: {},
  mutations: {},
  actions: {},
  getters: {}
})

严格模式

严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到

严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失
```
const store = new Vuex.Store({
    // ...
    strict: process.env.NODE_ENV !== 'production'
})
```

State

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。

使用 mapState 简化 State 在视图中的使用，mapState 返回计算属性

// 1.接收数组参数
// 该方法是 vuex 提供的，所以使用前要先导入
import { mapState } from 'vuex'
// mapState 返回名称为 count 和 msg 的计算属性
// 在模板中直接使用 count 和 msg
computed: {
  ...mapState(['count', 'msg']),
}
// 2.接收对象参数 如果当前视图中已经有了 count 和 msg，如果使用上述方式的话会有命名冲突
import { mapState } from 'vuex'
// 通过传入对象，可以重命名返回的计算属性
computed: {
    ...mapState({
        num: state => state.count,
        message: state => state.msg
    })
}

Getter

Getter 就是 store 中的计算属性，使用 mapGetter 简化视图中的使用

import { mapGetter } from 'vuex'
computed: {
    ...mapGetter(['reverseMsg']),
        // 改名，在模板中使用 reverse
        ...mapGetter({
        reverse: 'reverseMsg'
    })
}

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

使用 Mutation 改变状态的好处是，集中的一个位置对状态修改，不管在什么地方修改，都可以追踪到状态的修改。可以实现高级的 time-travel 调试功能
```
import { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['increate']),
        // 传对象解决重名的问题
        ...mapMutations({
        increateMut: 'increate'
    })
}
```

Action

Action 类似于 mutation，不同在于

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['increate']),
        // 传对象解决重名的问题
        ...mapActions({
        increateAction: 'increate'
    })
}

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、 mutation、action、getter、甚至是嵌套子模块。

Plugin

Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数：

const myPlugin = store => {
    // 当 store 初始化后调用
    store.subscribe((mutation, state) => {
        // 每次 mutation 之后调用
        // mutation 的格式为 { type, payload }
    })
}
然后像这样使用：
const store = new Vuex.Store({
    // ...
    plugins: [myPlugin]
})

购物车案例：项目地址