Vue原理-vuex
Posted 火腿肠烧烤大赛冠军
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue原理-vuex相关的知识,希望对你有一定的参考价值。
Vuex原理
store注入组件install方法
Vue.use(Vuex); // vue的插件机制,安装vuex插件
当ues(Vuex)时候,会调用vuex中的install方法,装在vuex!
下面时install的核心源码:
Vue.mixin(
beforeCreate()
if (this.$options && this.$options.store)
//找到根组件 main 上面挂一个$store
this.$store = this.$options.store
// console.log(this.$store);
else
//非根组件指向其父组件的$store
this.$store = this.$parent && this.$parent.$store
)
store注入 vue的实例组件的方式,是通过vue的 mixin机制,借助vue组件的生命周期 钩子 beforeCreate 完成的。即 每个vue组件实例化过程中,会在 beforeCreate 钩子前调用 vuexInit 方法
Vuex如何实现响应式的
state实现:
this._s = new Vue(
data:
// 只有data中的数据才是响应式
state: options.state
)
getters实现
//实现getters原理
let getters = options.getters ||
// console.log(getters);
// this.getters = getters; //不是直接挂载到 getters上 这样只会拿到整个 函数体
this.getters = ;
// console.log(Object.keys(getters)) // ["myAge","myName"]
Object.keys(getters).forEach((getterName) =>
// console.log(getterName) // myAge
// 将getterName 放到this.getters = 中
// console.log(this.state);
Object.defineProperty(this.getters, getterName,
// 当你要获取getterName(myAge)会自动调用get方法
// 箭头函数中没有this
get: () =>
return getters[getterName](this.state)
)
)
Vuex的state状态是响应式,是借助vue的data是响应式,将state存入vue实例组件的data中;Vuex的getters则是借助vue的计算属性computed实现数据实时监听。
注意:响应式和双向绑定不是一个概念
mutations实现
let mutations = options.mutations ||
// console.log(mutations);
this.mutations = ;
Object.keys(mutations).forEach(mutationName=>
// console.log(mutationName);
this.mutations[mutationName] = (payload) =>
this.mutations[mutationName](this.state,payload)
)
action实现
// actions的原理
let actions = options.actions ||
this.actions = ;
forEach(actions,(actionName,value)=>
this.actions[actionName] = (payload)=>
value(this,payload)
)
commit dispatch的实现
commit(type,payload)
this.mutations[type](payload)
// type是actions的类型
dispatch=(type,payload)=>
this.actions[type](payload)
参考链接:https://www.cnblogs.com/hjson/p/10500770.html
以上是关于Vue原理-vuex的主要内容,如果未能解决你的问题,请参考以下文章