专业做网站排名多少钱,wordpress 添加登录界面,江西南昌最新通告今天,wordpress换行不显示vuex集中式存储管理应用所有组件的状态#xff0c;并以响应的规则保证状态以可预测的方式 发生变化。
步骤#xff1a;
1.Store类#xff0c;保存选项#xff0c;_mutations#xff0c;_actions#xff0c;getters
2.响应式状态#xff1a;new Vue方式设置响应式。
…vuex集中式存储管理应用所有组件的状态并以响应的规则保证状态以可预测的方式 发生变化。
步骤
1.Store类保存选项_mutations_actionsgetters
2.响应式状态new Vue方式设置响应式。
3.get state 和 set state commit dispatch
4.install方法 挂载store到vue的原型对象上所有实例都可以读取到。
生成Vuex类
说到底vuex也还是个插件所以生成一个类按照使用插件的形式将其export导出。
挂载到Vue实例上我们还是使用mixin的方式原理和vue-router的自定义方式一致这里就不多说了。
let Vueclass Store{constructor(options){//保存选项// state为响应式数据this.state new Vue({data:options.state})}
}function install(_Vue){Vue _Vue//挂载$store给外面使用Vue.mixin({beforeCreate() {if(this.$options.store){//挂载到vue原型上每个vue实例都可以访问到Vue.prototype.$store this.$options.store}},})
}export default {Store,install
}
但是在这里我们使用new Vue的data属性来让state成为一个响应式的数据有个弊端就是能够直接的修改data里的数据那这样违反了vuex单向数据流的特点那么我们要封装一下。
官网解释有两个的$变量就不做代理所以也就不会再_vm的根上访问到$$state这个属性同时设置set get俩属性get为只读那么外面就无法修改state的值只能通过commit或actions进行修改。_vm下的响应式对象会挂载在_data的对象上_vm下的$data是一个原始对象不具备响应式所以使用_data。
如下图$data不存在observer class Store{constructor(options){//保存选项// state为响应式数据this._vm new Vue({data:{$$state:options.state}})}//给用户暴露接口get state(){console.log(this._vm);return this._vm._data.$$state}set state(val){throw Error(replaceSate)}
}
commit和dispatch
响应式的数据发生变化就会引起render函数渲染数据 在commit中会接收到参数我们在构造函数中存储传入的mutations和actions然后在commit和dispach中匹配到详情的操作然后执行。
但是在执行过程中有坑this的指向问题当前的调用是在外部所以指向的是外部的store实例是没有commit等参数所以没有办法调用到。需要在constructor存储上下文并且改变this指向到当前的实例获取到对应的上下文即可。
class Store{constructor(options){//保存选项this._mutations options.mutations||{}this._actions options.actions||{}// state为响应式数据this._vm new Vue({data:{$$state:options.state}})//上下文的绑定this.committhis.commit.bind(this)this.dispatchthis.dispatch.bind(this)}//给用户暴露接口get state(){return this._vm._data.$$state}set state(val){throw Error(replaceSate)}//store.commit(type,payload)commit(type,payload){//获取mutitionsconst entry this._mutations[type]if(!entry){console.error(unknown mutition type);}entry(this.state,payload)}dispatch(type,payload){const entry this._actions[type]if(!entry){console.error(unknown actions type);}console.log(this);entry(this,payload)//注意这里的this指向问题当前的调用是在外部所以指向的是外部的store实例是没有commit等参数所以没有办法调用到。需要在constructor存储上下文并且改变this指向。}
}
getters
getters我们可以借助computed属性只可获取不可更改获取到getters的key给到computed并且在给一个函数在其内部调用fn并且传入state再将computed属性进行响应式处理。
this._wrappedGetters options.getters||{}//定义computed选项const computed{}this.getters{}const store thisObject.keys(this._wrappedGetters).forEach(key{//获取用户定义的getterconst fn store._wrappedGetters[key]// 转换为computed可以使用的无参数形式computed[key]function(){return fn(store.state)}//为getters定义只读属性Object.defineProperty(store.getters,key,{get:(){return store._vm[key]}})})// state为响应式数据this._vm new Vue({data:{$$state:options.state},computed})
附完整代码
let Vueclass Store{constructor(options){//保存选项this._mutations options.mutations||{}this._actions options.actions||{}this._wrappedGetters options.getters||{}//定义computed选项const computed{}this.getters{}const store thisObject.keys(this._wrappedGetters).forEach(key{//获取用户定义的getterconst fn store._wrappedGetters[key]// 转换为computed可以使用的无参数形式computed[key]function(){return fn(store.state)}//为getters定义只读属性Object.defineProperty(store.getters,key,{get:(){return store._vm[key]}})})// state为响应式数据this._vm new Vue({data:{$$state:options.state},computed})//上下文的绑定this.committhis.commit.bind(this)this.dispatchthis.dispatch.bind(this)}//给用户暴露接口get state(){return this._vm._data.$$state}set state(val){throw Error(replaceSate)}//store.commit(type,payload)commit(type,payload){//获取mutitionsconst entry this._mutations[type]if(!entry){console.error(unknown mutition type);}entry(this.state,payload)}dispatch(type,payload){const entry this._actions[type]if(!entry){console.error(unknown actions type);}entry(this,payload)//注意这里的this指向问题当前的调用是在外部所以指向的是外部的store实例是没有commit等参数所以没有办法调用到。需要在constructor存储上下文并且改变this指向。}
}function install(_Vue){Vue _Vue//挂载$store给外面使用Vue.mixin({beforeCreate() {if(this.$options.store){//挂载到vue原型上每个vue实例都可以访问到Vue.prototype.$store this.$options.store}},})
}export default {Store,install
}
