南宁网站建设公司怎么接单,甜橙直播,如何快速推广网上国网,三合一网站cms实现vuex源码#xff0c;手写 Vuex 是专门为 Vue.js 应用程序开发的状态管理模式 库#xff0c;它采用集中式存储管理应用的所有组件的状态#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 第一步#xff1a;定义初始化Store类 创建文件夹store/vuex.js 1…实现vuex源码手写 Vuex 是专门为 Vue.js 应用程序开发的状态管理模式 库它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。 第一步定义初始化Store类 创建文件夹store/vuex.js 1.定义 Store 类
创建一个名为 Store 的类它接受一个 options 对象作为参数。在 options 对象中包含 state应用的状态、mutations同步更改状态的方法、actions异步操作或包含任意异步操作的方法、以及 getters从 state 中派生出一些状态的方法。
let Vue;
class Store{constructor(options) {}
}2.初始化 Vue 实例
在 Store 类的构造函数中使用 new Vue({ data: { $$state: options.state } }) 创建一个 Vue 实例用于响应式地存储状态。这里使用 $$state 作为属性的名称是为了避免与 Vue 实例自身的 state 属性冲突但这不是必须的只是一个命名约定。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})}
}3.存储 mutations 和 actions
将 options.mutations 和 options.actions 分别存储在 this._mutations 和 this._actions 中。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})this._mutations options.mutationsthis._actions options.actions}
}4.绑定 commit 和 dispatch 方法
使用 Function.prototype.bind 方法将 commit 和 dispatch 方法绑定到 Store 实例上以确保在回调函数中 this 指向正确。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})this._mutations options.mutationsthis._actions options.actionsthis.commit this.commit.bind(this)this.dispatch this.dispatch.bind(this)}
}5.初始化 getters
创建一个空对象 this.getters 用于存储 getter 方法。如果 options.getters 存在则调用 this.handleGetters(options.getters) 方法来初始化 getters。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})this._mutations options.mutationsthis._actions options.actionsthis.commit this.commit.bind(this)this.dispatch this.dispatch.bind(this)this.getters {}options.getters this.hanleGetters(options.getters)}
}第二步实现 handleGetters 方法和其他 Store 方法
1.实现 handleGetters 方法
在 handleGetters 方法中遍历 getters 对象的键。使用 Object.defineProperty 在 this.getters 对象上定义每个 getter 属性其 get 方法返回 getters[key](this.state) 的结果。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})this._mutations options.mutationsthis._actions options.actionsthis.commit this.commit.bind(this)this.dispatch this.dispatch.bind(this)this.getters {}options.getters this.hanleGetters(options.getters)}handleGetters(getters){Object.key(getters).map((key){Object.defineProperty(this.getters,key,get: () getters[key](this.state)})})}
}2.实现 state 的 getter 和 setter
使用 get state() 方法来访问 Vue 实例中存储的状态。使用 set state(v) 方法来防止直接修改状态虽然在这里setter 只是打印了一个错误消息。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})this._mutations options.mutationsthis._actions options.actionsthis.commit this.commit.bind(this)this.dispatch this.dispatch.bind(this)this.getters {}options.getters this.hanleGetters(options.getters)}handleGetters(getters){Object.key(getters).map((key){Object.defineProperty(this.getters,key,get: () getters[key](this.state)})})}//get setget state(){return this._vm.data.$$state}set state(v) {console.error(please provide);}
}3.实现 commit 方法
commit 方法用于触发 mutations它接受一个 typemutation 的类型和一个可选的 payload传递给 mutation 的数据。根据 type 从 this._mutations 中找到对应的 mutation 方法并调用它传入 this.state 和 payload。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})this._mutations options.mutationsthis._actions options.actionsthis.commit this.commit.bind(this)this.dispatch this.dispatch.bind(this)this.getters {}options.getters this.hanleGetters(options.getters)}handleGetters(getters){Object.key(getters).map((key){Object.defineProperty(this.getters,key,get: () getters[key](this.state)})})}//get setget state(){return this._vm.data.$$state}set state(v) {console.error(please provide);}//commitcommit(type,value){const entry this._mutations[type]if(!entry){console.error(please provide);}entry(this.state,value)}
}4.实现 dispatch 方法:
dispatch 方法用于触发 actions它的工作原理与 commit 类似但通常用于处理异步操作。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})this._mutations options.mutationsthis._actions options.actionsthis.commit this.commit.bind(this)this.dispatch this.dispatch.bind(this)this.getters {}options.getters this.hanleGetters(options.getters)}handleGetters(getters){Object.key(getters).map((key){Object.defineProperty(this.getters,key,get: () getters[key](this.state)})})}//get setget state(){return this._vm.data.$$state}set state(v) {console.error(unknown mutation type);}//commitcommit(type,value){const entry this._mutations[type]if(!entry){console.error(please provide);}entry(this.state,value)}//dispatchdispatch(type,value){const entry this._actions[type]if(!entry){console.error(unknown action type)}entry(this.state,value)}
}第三步安装现在自定义vuex插件需要一个install方法
创建一个名为 install 的函数它接受一个 Vue 构造函数作为参数。在 install 函数中将 Vue 构造函数存储在全局变量 Vue 中。使用 Vue.mixin 方法来全局注册一个 beforeCreate 钩子该钩子会在每个 Vue 组件实例创建之前被调用。在 beforeCreate 钩子中检查 this.$options.store 是否存在如果存在则将其赋值给 Vue.prototype.$store这样在任何 Vue 组件中都可以通过 this.$store 访问到 store 实例。
let Vue;
class Store{constructor(options) {this._vm new Vue({data:{$$state:options.state}})this._mutations options.mutationsthis._actions options.actionsthis.commit this.commit.bind(this)this.dispatch this.dispatch.bind(this)this.getters {}options.getters this.hanleGetters(options.getters)}handleGetters(getters){Object.key(getters).map((key){Object.defineProperty(this.getters,key,get: () getters[key](this.state)})})}//get setget state(){return this._vm.data.$$state}set state(v) {console.error(unknown mutation type);}//commitcommit(type,value){const entry this._mutations[type]if(!entry){console.error(please provide);}entry(this.state,value)}//dispatchdispatch(type,value){const entry this._actions[type]if(!entry){console.error(unknown action type)}entry(this.state,value)}
}Store.install (_vue){Vue _vueVue.mixin({beforeCreate(){if(this.$options.store){Vue.prototype.$store this.$options.$store}}})
}第四步导出installStore
let Vue;
class Store {constructor(options) {this._vm new Vue({data: {$$state: options.state,},});this._mutations options.mutations;this._actions options.actions;this.commit this.commit.bind(this);this.dispatch this.dispatch.bind(this);this.getters {};options.getters this.handleGetters(options.getters);}handleGetters(getters) {console.log(Object.keys(getters))Object.keys(getters).map((key) {Object.defineProperty(this.getters, key, {get: () getters[key](this.state)});});}get state() {return this._vm._data.$$state;}set state(v) {console.error(please provide);}commit(type, payload) {console.log(type, payload)const entry this._mutations[type];if (!entry) {console.error(unknown mutation type: type);}entry(this.state, payload);}dispatch(type, payload) {console.log(this._actions[type]);const entry this._actions[type];if (!entry) {console.error(unknown mutation type: type);}entry(this.state, payload);}
}
const install (_Vue) {Vue _Vue;Vue.mixin({beforeCreate() {if (this.$options.store) {Vue.prototype.$store this.$options.store;}},});
};
export default {Store,install,
};第五步创建store/index.js
import Vue from vue
// 引入自己的写的vuex,里面有一个对象{install}当你use时会自动调用这个方法
import Vuex from ./vuex.js
Vue.use(Vuex)
//需要创建一个仓库并导出
//当new的时候,给Vuex.js中传入了一堆的东西
export default new Vuex.Store({state: {name: 1},//getters中虽然是一个方法但是用时可以把他当作属性getters: { // 说白了就是vue中data中的computedpowerCount(state) {return state.name * 2},},// 改变状态异步请求数据 事件 mutations: {add(state) {state.name}},actions: {add(state) {setTimeout(() {console.log(state)state.name 30}, 1000);}}
})第六步在main中挂载store
/* eslint-disable vue/multi-word-component-names */
import Vue from vue
import App from ./App.vue
import store from ./store.js
Vue.config.productionTip falsenew Vue({name:main,store,render: h h(App),
}).$mount(#app)第七步如何使用store
和vuex一样的用法语法一样
templatediv{{ $store.state.name }}{{ $store.getters.powerCount }}button clickadd123/button/div
/template
script
export default {name: app,data() {return {}},methods:{add(){this.$store.commit(add)// this.$store.dispatch(add)console.log(this.$store.getters.powerCount)this.$store.handleGetters.powerCount}},mounted() { console.log(this.$store.state.name)}
}
/script{{ $store.state.name }}{{ $store.getters.powerCount }}button clickadd123/button/div
/template
script
export default {name: app,data() {return {}},methods:{add(){this.$store.commit(add)// this.$store.dispatch(add)console.log(this.$store.getters.powerCount)this.$store.handleGetters.powerCount}},mounted() { console.log(this.$store.state.name)}
}
/script
