Vuex是一个专为Vue.js应用程序开发的状态管理模式

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证以一种可预测的方式发生变化

状态管理到底是什么？

可以简单将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。那么，多个组件就可以共享这个对象中的所有变量属性了。让多个组件可以共享状态。

相比于自己封装一个对象，Vuex最大的便利就是响应式

Vuex核心概念

State、Getters、Mutation、Action、Module

1. State 单一状态树

存放状态相关的信息

Vuex提出使用单一状态树，Single Source of Truth，也可以翻译成单一数据源

一个项目只有一个store，全部共享的状态都放到一个store里面，对应其他页面的$store。如果状态信息是保存到多个Store对象中，那么之后的管理和维护就会变得很困难，所以Vuex也使用了单一状态树来管理应用层级的全部状态。

2. Getters

数据经过处理后再展示，类似于单个组件中的计算属性

3. Mutations

Vue的store状态更新的唯一方式：提交Mutation

Mutations里定义的每个函数主要包括两部分：

mutation的定义方式

通过mutation更新

    addCount(count) {
      // 这里的count和下面的stu参数是payload,负载
      // 1.普通提交风格
      // this.$store.commit("incrementCount", count);

      // 2.特殊提交风格
      this.$store.commit({
        type: "incrementCount",
        count,
      });
    },

    incrementCount(state, payload) {
      // 特殊提交风格下payload接收的是整个对象
      state.counter += payload.count
    },

如何使新添加的属性做到响应式？（新版本似乎有所不同）

    updateInfo(state) {
      // state.info.name = 'coderwhy'
      // state.info['address'] = 'Los Angles' //没有初始化的值不会响应式添加

      // 如何使新添加的属性做到响应式?
      // Vue.set(state.info, 'address', 'Los Angles')

      // 该方式删除属性做不到响应式
      // delete state.info.age

      // 响应式删除属性
      Vue.delete(state.info, 'age')
    }