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

本文参考珠峰架构公开课之vuex实现原理

vuex是基于vue框架的状态管理。

如何在vue项目中初始化vuex？

1. 通过Vue.use(vuex)注册。
2. 通过实例化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访问全局状态，分析可以有两种方式实现：

1. $store是绑定在vue的原型上，即通过Vue.prototype.$store绑定。
2. 通过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来访问状态值。

最后编辑于：2025-04-21 10:38:03

© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦！！！