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]
})

购物车案例：项目地址