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的返回值会根据他的依赖被缓存起来,只有依赖值改变才会更新