Vuex原理

最新推荐文章于 2023-12-21 10:27:49 发布

庸人°

最新推荐文章于 2023-12-21 10:27:49 发布

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/wuxian_wj/article/details/123182651

版权

本文深入探讨了Vuex的工作原理，包括如何通过插件系统在Vue应用中注入Vuex，以及Vuex的数据响应式实现。在Vuex的构造函数中，它将状态管理对象作为Vue组件的隐藏属性，确保对数据的修改能够触发视图更新。总结了Vuex的注入流程，即install -> applyMixin -> VuexInit，以及响应式原理，通过resetStoreVM创建一个包含state的Vue实例并利用Vue的响应式系统。

摘要由CSDN通过智能技术生成

Vuex注入

Vuex是作为vue的一个插件而存在的，它只能应用在vue中，是因为其高度依赖vue中的computed依赖检测系统以及其插件系统。

在vue中，每一个插件都需要一个公开的install方法，在vuex中，它的install方法中调用了applyMixin方法。这个方法的主要作用是在所有组件的beforeCreate生命周期中注入this.$store这样一个对象。源码如下：

// src/store.js
export function install (_Vue) {
   
  if (Vue && _Vue === Vue) {
   
    if (__DEV__) {
   
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

// src/mixin.js
// 对应的applyMinix方法
export default function (Vue) {
   
  const version = Number(Vue.version.split('.')[0])

  if (version >= 2) {
   
    // vue版本大于2使用混入的方式，在每个组件的beforeCreate生命周期中混入vuexInit函数
    Vue.mixin({
    beforeCreate: vuexInit })
  } else {
   
    // override init and inject vuex init procedure
    // for 1.x backwards compatibility.
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {
    }) {
   
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit
      _init.call(this, options