Vuex和普通全局对象

Vuex中的核心方法

Vuex是一个专为Vue.js应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是store仓库，store基本上就是一个容器，它包含着你的应用中大部分的状态state。

描述

在大量的业务场景下，不同的模块组件之间确实需要共享数据，也需要对其进行修改操作。也就引发软件设计中的矛盾：模块组件之间需要共享数据和数据可能被任意修改导致不可预料的结果。为了解决其矛盾，软件设计上就提出了一种设计和架构思想，将全局状态进行统一的管理，并且需要获取、修改等操作必须按我设计的套路来，就好比马路上必须遵守的交通规则，右行斑马线就是只能右转一个道理，统一了对全局状态管理的唯一入口，使代码结构清晰、更利于维护。状态管理模式从软件设计的角度，就是以一种统一的约定和准则，对全局共享状态数据进行管理和操作的设计理念。你必须按照这种设计理念和架构来对你项目里共享状态数据进行CRUD，所以所谓的状态管理模式就是软件设计的一种架构模式。

关于Vuex的五个核心概念，在这里可以简单地进行总结：

• state: 基本数据。
• getters: 从基本数据派生的数据。
• mutations: 提交更改数据的方法，同步操作。
• actions: 像一个装饰器，包裹mutations，使之可以异步。
• modules: 模块化Vuex。

State

单一状态树

Vuex使用单一状态树，即用一个对象就包含了全部的状态数据，state作为构造器选项，定义了所有我们需要的基本状态参数，也就是说state便是唯一数据源SSOT，同样每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。此外单状态树和模块化并不冲突，我们仍然可以将状态和状态变更事件分布到各个子模块中。

在Vue组件中获得Vuex状态

从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，由于Vuex的状态存储是响应式的，所以在这里每当store.state.count变化的时候，都会重新求取计算属性，进行响应式更新。

const store = new Vuex.Store({
    state: {
        count: 0
    }
})
const vm = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

mapState辅助函数

mapState函数返回的是一个对象，当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余，为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性。

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from "vuex";

export default {
  // ...
  computed: mapState({
    // 箭头函数
    count: state => state.count,

    // 传字符串参数 count 等同于 state => state.count
    countAlias: 'count',

    // 使用 this
    countPlusLocalState: function(state) {
      return state.count + this.localCount;
    }
  })
  // ...
}

如果当前组件中还有局部计算属性需要定义，通常可以使用对象展开运算符...将此对象混入到外部对象中。

import { mapState } from "vuex";

export default {
  // ...
  computed: {
    localComputed: function() { /* ... */ },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      // ...
    })
    // ...
}

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://vuex.vuejs.org/zh/
https://www.jianshu.com/p/1fdf9518cbdf
https://www.jianshu.com/p/29467543f77a
https://juejin.cn/post/6844903624137523213
https://segmentfault.com/a/1190000024371223
https://github.com/Hibop/Hibop.github.io/issues/45