asp.net mvc 网站开发之美广东卫视新闻联播
本文参考珠峰架构公开课之
vuex实现原理
vuex是基于vue框架的状态管理。
如何在vue项目中初始化vuex？
- 通过
Vue.use(vuex)注册。 - 通过实例化
vuex里的Store，并传入options即可使用。
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {}
});
既然vuex是通过vue.use注册，并且通过vuex.Store实例化来生成，那它的底层是包含一个Store的实例，并且有个注册组件的install方法。
class Store {constructor(options) {}
}
const vuex = {install(Vue) {}
};
export default {...vuex,Store,
};
状态保存在什么地方？
在vue中是通过this.$store.state访问。既然通过this访问全局状态，分析可以有两种方式实现：
-
$store是绑定在vue的原型上，即通过Vue.prototype.$store绑定。 - 通过
Vue.mixin给所有的组件的属性上绑定$store。
实际上vuex是通过Vue.mixin来实现保存全局状态的。那为什么不能绑定在vue的prototype上呢？看下例：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'new Vue1({store,render: h => h(App)
}).$mount('#app')new Vue2({render: h => h(App)
}).$mount('#app2')
如果碰到一个项目中vue被实例化了两次，这时候将$store保存在vue.prototype上的话，Vue1和Vue2会共享一个$store，这样会造成状态冲突。实例化出来的vue，他们的状态应该是隔离的。所以通过Vue.mixin给当前vue实例下所有的组件绑定$store属性，实现代码如下：
const vuex_install = {install(vue) {vue.mixin({beforeCreate() {if (this.$options && this.$options.store) {this.$store = this.$options.store;} else {this.$store = this.$parent && this.$parent.$store;}},});},
};
1. 为什么要放在beforeCreate中注册？
个人理解是因为在beforeCreate中注册$store的话就可以在created中使用$store。
2. $store是如何绑定到各个组件上的？
通过Vue.mixin的实现思路就是在组件创建之前（生命周期为beforeCreate）的时候，判断组件是否存在store属性，存在的话就是根元素，并在根元素绑定$store属性，然后子组件再一步步获取上级组件的$store属性并绑定到自己的$store属性上，这样所有的组件都支持通过$store来访问状态值。
© 著作权归作者所有,转载或内容合作请联系作者
喜欢的朋友记得点赞、收藏、关注哦！！！