当前位置：首页 > news >正文

vuex源码分析（一）——初始化vuex

news 来源：原创 2025/5/6 14:09:28

本文参考珠峰架构公开课之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来访问状态值。