Vuex相关

1. 标题

部分概念集合
Vuex 是为Vue提供的一种状态管理机制。
每一个vue插件都需要有一个公开的install方法。

2.特点

Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store的状态发生变化，那么相应的组件也会相应地得到高效更新。
不能直接改变store中的状态，只能通过显式的提交mutation改变store中的状态。通过commit提交mutation（唯一）
vuex实现方式完全的使用了vue自身的响应式设计，依赖监听、依赖收集都属于vue对对象Property set get方法的代理劫持。

3.vuex 如何混入到vue中

在install的时候调用了applyMixin方法，在vue的beforeCreate前初始化vuex(vuexInit)，初始化过程中将opotion.store赋值给this.$store，达到通过this.$store直接访问的目的。
部分?：
vue在引入vuex的时候使用了vue.use(Vuex)
Vue 源码在 initGlobalAPI 入口方法中调用了 initUse (Vue) 方法，这个方法定义了 Vue.use() 需要做的内容。

• 初始化plugin

• 判断是否有plugin、判断是否重复

• 其中方法中判断了插件是否有 install 方法

  而vuex中有相应的install函数，这个方法需要做的是

• 判断是否重复安装

• 执行 applyMixin，目的是执行 vuexInit 方法初始化 Vuex。将 vuexInit 混淆进 Vue 的 beforeCreate(Vue2.0) 或 _init 方法(Vue1.0)

  applyMixin(Vue)

  Vue.mixin({ beforeCreate: vuexInit });
  

  所以每一个vue的vm实例都会调用vuexInit()方法

    function vuexInit () {
      const options = this.$options
      if (options.store) {
        /* 根节点存在 stroe 时 */
        this.$store = typeof options.store === 'function'
          ? options.store()
          : options.store
      } else if (options.parent && options.parent.$store) {
        /* 子组件直接从父组件中获取 $store，这样就保证了所有组件都公用了全局的同一份 store*/
        this.$store = options.parent.$store
      }
    }
  

  • 根节点存在 stroe 时，则直接将 options.store 赋值给 this.$store。否则则说明不是根节点，从父节点的 $store 中获取。
  • 通过这步的操作，我们就以在任意一个 vm 中通过 this.$store 来访问 Store 的实例。

4. 工作流程

vuex实现了一个单向数据流，在全局有一个state存放数据，如果要改变数据，必须通过commit提交mutation改变数据，mutation同时提供了订阅者模式供外部插件调用数据的更新。
所有的异步操作（如后端接口相关）或者批量的操作要用action，通过dispatch触发。
getter类似vue中的compute属性，对数据的过滤，getter的返回值会根据他的依赖被缓存起来，只有依赖值改变才会更新