Vuex的实现原理是什么，写出其实现的核心代码？

最新推荐文章于 2025-03-21 08:15:00 发布

爱上猫的程序猿

最新推荐文章于 2025-03-21 08:15:00 发布

阅读量213

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/tang18533952786/article/details/130090847

版权

vuex是利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性$store。vuex的state是借助vue的响应式data实现的。getter是借助vue的计算属性computed特性实现的。

核心代码

1、在vue项目中先安装vuex

import Vuex from 'vuex';
Vue.use(vuex);// vue的插件机制

2、利用vue的插件机制，使用Vue.use(vuex)时，会调用vuex的install方法，装载vuex，install方法的代码如下：

export function install (_Vue) {
  if (Vue && _Vue === Vue) {
    if (process.env.NODE_ENV !== 'production') {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

3、applyMixin方法使用vue 混入机制，vue的生命周期beforeCreate钩子函数前混入vuexInit方法，核心代码如下：

Vue.mixin({ beforeCreate: vuexInit });
 
function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
}