介绍
采用集中式存储管理应用的所有组件的状态, 就能实现组件间数据共享
实现
逻辑图
从图上有两条线: Vue.use(vuec)
, 与 new Vuec.center(options)
第一条线Vue.use(vuec)
安装插件
使用Vue.use(vuec)
时, 会执行vuec
的install
方法,会注入参数Vue
所以vuec
是这样的,
// index.js
import {Center, install} from './center'
export default {Center, install}
复制代码
Center
对象将实例化成center
(下面再说),我们先看看install
方法
// center.js
let Vue // 全局变量, 保存install里的Vue
export function install (_Vue) {
if (!Vue) {
_Vue.mixin({
beforeCreate: applyMixin // 在beforeCreate钩子上混入applyMixin函数
})
}
Vue = _Vue
}
复制代码
install
在Vue
原型的beforeCreate
混入applyMixin
函数, 也就是说在生成每个Vue
组件时,在它的生命周期beforeCreate
钩子上就会执行applyMixin
方法
第二条线 new Vuec.center(options)
实例化Center
对象
先看看用户传入的options
, 下面例子
export default new Vuec.Center({
state: {
name: 'liuyang'
},
mutations: {
changeName (state) {
state.name = 'jike'
}
}
})
复制代码
上面代码会生成center
实例, 该实例上应该包括:state
状态,commit
方法提交变更等
// center.js
export class Center {
constructor (options= {}) {
let center = this
this.mutations = options.mutations
observeState(center, options.state)
}
get state () { // 代理了this.$center.state的最终访问值
return this._vm.$data.$$state
}
commit (_type, _payload) {
this.mutations[_type](this.state, _payload)
}
}
function observeState(center, state) { // 响应式state
center._vm = new Vue({
data: {
$$state: state
}
})
}
复制代码
在执行new Vuec.Center({..})
时,就是执行Center
的构造函数
-
首先执行
let center = this
, 定义center
保存当前实例 -
接着执行
this.mutations = options.mutations
, 在实例center
上添加mutations
属性, 值就是用户输入mutations
,按上面例子,
this.mutations
长成这样this.mutations = { changeName (state) { state.name = 'jike' } } 复制代码
-
最后执行
observeState(center, options.state)
, 作用:让center
实例的state
属性指向options.state
并且是响应式的
function observeState(center, state) { // 响应式state
center._vm = new Vue({ // 利用Vue的响应系统,将state转化成响应式
data: {
$$state: state
}
})
}
复制代码
在center
实例上添加_vm
属性, 值是一个Vue
实例, 在该Vue
实例的data
下定义了$$state
, 它的值是options.state
用户输入的state
; 结合上面的这段代码
// center.js
export class Center {
...省略
get state () { // 代理了this.$center.state的最终访问值
return this._vm.$data.$$state
}
...省略
}
复制代码
所以我们在组件中访问center.state
其实就是访问center._vm.$data.$$state
OK, center
就构建好了
创建Vue
组件
用户输入
import Vue from 'vue'
import App from './App'
import router from './router'
import center from './center'
new Vue({
el: '#app',
router,
center, // 构建好的center实例
template: '<App/>',
components: {App}
})
复制代码
在beforeCreate
生命周期时会触发上面混入的applyMixin
函数
// mixins.js
export default function applyMixin() {
vuecInit.call(this) //
}
function vuecInit () {
const options = this.$options
// vue的实例化是从外往内, 所以父组件的$center一定是options的center
this.$center = options.parent?options.parent.$center: options.center
}
复制代码
applyMixin
里会执行vuecInit.call(this)
, 这里的this
指向当前组件的实例,
接着看vuecInit
, 定义了options
等于用户输入选项,因为先创建根组件, 所以根组件this.$center
的值的引用就是我们在new Vue({..center})
时传入的center
实例, 下面所有组件都指向它
OK, 你就可以在组件里使用this.$center
访问了
commit变更
// center.js
export class Center {
... 省略
commit (_type, _payload) {
this.mutations[_type](this.state, _payload)
}
}
复制代码
通常我们变更时: this.$center.commit('changeName', 'jike')
, 这样的话, this.mutations[_type]
就是对应方法函数, 往该函数里传入state
以及payload
,
举上面的例子
// this.mutations[_type] , _type = 'changeName', payload= 'jike'
this.mutations = {
changeName (state, payload) {
state.name = payload
}
}
复制代码
说明
上面只是一个简单的状态管理, 还有很多地方没有实现: actions
异步变更,getters
函数,modules
模块分割, 辅助函数mapState..
等
源码地址: github