罗湖网站制作,seo引擎优化是做什么的,国外网站关键词,网站开发qq群vuex-class是在class-component中使用vuex的辅助工具。
学习任何技术栈的使用#xff0c;最透彻的掌握方法就是去简单实现一下#xff0c;下面先简单实现一下vuex#xff0c;然后基于我们自己实现的vuex再去实现一个vuex-class#xff0c;彻底搞定vuex-class的使用。
首先…vuex-class是在class-component中使用vuex的辅助工具。
学习任何技术栈的使用最透彻的掌握方法就是去简单实现一下下面先简单实现一下vuex然后基于我们自己实现的vuex再去实现一个vuex-class彻底搞定vuex-class的使用。
首先回忆一下vuex的使用配置方法首先我们需要在某个位置执行Vue.use(Vuex)然后通过new Vuex.Store的方式创建一个Store实例在实例化Vue时将其传入配置对象new Vue({store})。
src/store/index.js
import Vue from vue;
import Vuex from vuex;
Vue.use(Vuex);
export default new Vuex.Store({state: {count: 0}
})main.js
import Vue from vue
import App from ./App.vue
import store from ./store
Vue.config.productionTip false
new Vue({store,render: h h(App),
}).$mount(#app)经过如上的配置我们就可以在组件中通过this.$store.xxx去访问Store对象的属性使用state、commit…
为了保留核心删繁就简我们自己的vuex只实现在组件中通过this.$store.state访问响应式state的能力。
实现vuex
思路分析
因为vue2中的组件其实就是一个对象整个项目以App.vue作为根组件与所有子组件构成了一个巨大的组件树说白了就是一个对象树并且基于当前组件对象可以通过$parent等属性访问组件树的相邻父组件。
那么我们既然要让所有组件都可以通过$store属性访问到store对象那么就是很单纯的给所有组件都加一个$store属性就好了。
实现切入点
借助Vue的插件机制Vue.use方法可以接收一个对象并执行这个对象的install方法Vue构造函数将作为install的参数我们可以在install的逻辑中通过Vue.mixin给未来要实例化的所有组件注入逻辑
代码实现
整个组件树挂载$store
Vuex对象中除了install方法之外还要有一个Store构造函数new Vuex.Store(...)我们暂且不管这个构造函数究竟如何创建实例store我们先让所有组件都能拿到它创建的实例store
因为在main.js中我们把store实例传给了new Vue的配置对象也就是说可以通过根组件对象的$options.store拿到store
对于App.vue这个根组件为了达成通过this.$store访问store对象的目的我们完全可以在其beforeCreate生命周期中执行this.$store this.$options.store但是对于组件树上的任意组件我们无法访问到根组件但熟悉vue渲染机制的话我们知道组件的渲染是从外至内的也就是先创建父组件再是其子组件所以借助整个App渲染时从外至内的“遍历”顺序我们可以轻松写出如下算法即除了根组件之外让所有组件都去$parent上去找store对象并给自己的$store属性赋值因为当前组件渲染时可以确定其父组件已经完成渲染
src/store/myVuex.js未来替换vuex
class Store {constructor(options) {}
}
const install function(Vue) {Vue.mixin({beforeCreate(){if (this.$options this.$options.store){ // 如果是根组件$options.store非空this.$store this.$options.store}else { //如果是任意子组件this.$store this.$parent this.$parent.$store}}})
}
const Vuex {Store,install,
}
export default Vuex;store数据响应式处理
现在的问题在于如何让我们Store构造函数能根据option.state创建一个响应式的state对象呢vue2并没有像vue3中提供与组件解绑的方法如ref、reactive来创建响应式数据所以最朴素也是唯一的一个方法就是创建一个vue组件实例并利用它的data配置来获取一个响应式数据
install方法的执行早于Store实例的创建所以在install中对Vue进行引用记录让Store的构造函数中可以使用它来创建组件。 let _Vue;class Store {constructor(options) {this.vm new _Vue({data: {state: options.state}})}get state() {return this.vm.state;}}
const install function(Vue) {_Vue Vue;Vue.mixin({beforeCreate(){if (this.$options this.$options.store){this.$store this.$options.store}else {this.$store this.$parent this.$parent.$store}}})
}
const Vuex {Store,install,
}
export default Vuex;这样我们的vuex就基本实现了替换vuex的导入地址为
import Vuex from ./myVuex;测试组件
// 父组件
templatediv idappvuex中的数据count--{{ this.$store.state.count }}ChildComponent /ClassChildComponent //div
/template
script
import ChildComponent from ./components/ChildComponent.vue
export default {name: App,components: {ChildComponent,},mounted() {console.log(this);}
}
/script
// 子组件
templatedivhr /childbutton clickaddCountaddCount/button/div
/template
script
export default {name: ChildComponent,methods: {addCount() {this.$store.state.count 1;}}
}
/script子组件中点击按钮父组件ui发生变化。
实现vuex-class
同样为了理清核心逻辑我们只实现一下State方法先回顾一下store中的数据如何在class-component中使用的。
import { State } from vuex-class;
export default class Xxx extends Vue {State((state) state.xxx) xxxS!: any;someFun() {// this.xxxS}
}其实概括来讲就是利用装饰器在执行class代码进行组件初始化的同时对options组件对象进行同步构建。并且在文章中详解了vue-property-decorator库的Ref方法的实现概括来说就是将class属性映射为options组件的计算属性实现class组件代码中this.xxxRef到this.$refs.xxxRef的映射。
其实明白了上面的思路这里要实现State方法就手到擒来了与Ref的实现可谓“换汤不换药”。
src/store/myVuexClass.js
import { createDecorator } from vue-class-component;
export function State(selector) {return createDecorator((options, key) {options.computed options.computed || {};options.computed[key] {cache: false,get() {return selector(this.$store.state);},}});
}我们丢给State方法一个selector函数参数最终构造的计算属性中调用selector时把this.$store.state扔进去让使用者去选所需的state中的状态就好了。
总结来说如果要实现vuex-class本质还是对于options组件对象的构建实现State方法是对其计算属性的构建如果要实现mutation或者action那么就是对option组件对象的methods的构建了这里不再赘述。
完整附件点此下载
