在所有 vue 组件实例之间共享变量

Question

我正在尝试重构一些代码并将一些代码移动到混入中。但我有不同的行为。我希望在组件的所有实例之间共享一个对象。所以我写了类似下面的东西

<script>
export default {
  registryManager: new RegistryManager()
}
</script>

在实例中，我是通过 this.$options.registeryManager 访问的。现在我已将此代码移至混合器。

混音

export default {
  registryManager: new RegistryManager()
}

组件

<script>
import registryManager from './mixins/registryManager';
export default {
  mixins: [registryManager]
}
</script>

假设您有 2 个组件 A、B。早些时候，组件 A 的所有实例都有一个 registryManager，而组件 B 的所有实例都有一个单独的 registryManger。使用 mixin，组件 A 和组件 B 的所有实例都共享一个注册表管理器，因为无论有多少组件使用 mixin，都只会创建一个 mixin 实例有没有办法为每个组件创建一个 mixin 实例以获得更早的行为？

Answer 1

这是预期的行为。只有一个 class 实例，new RegistryManager() 在 mixin 模块中只计算一次，Vue 不知道 registryManager 需要被实例化多次。

由于组件构造函数和class实例之间存在一对一的关系，因此可以将其分配为构造函数属性。

这可以在全球范围内完成：

Object.defineProperty(Vue.prototype, 'registryManager', {
  get() {
    if (!this.constructor._registryManager) {
      this.constructor._registryManager = new RegistryManager();
    }

    return this.constructor._registryManager;
  }
});

class 也是通过这种方式延迟实例化的。可以放在install(Vue) {...}里面作为插件使用。

或本地作为 mixin：

  beforeCreate() {
    if (!this.constructor._registryManager) {
      this.constructor._registryManager = new RegistryManager();
    }

    this.registryManager = this.constructor._registryManager;
  }

Answer 2

您可以在 mixin 中创建一个工厂方法，该方法需要一个 id（例如组件的名称）和 returns RegisterManager.

的一个实例

mixin 模块必须保留从 ids 到 RegisterManager.

实例的映射

与此类似。

const instances = {
}

export default {
  getRegistryManager: (id) => {
    if (!instances[id]) {
      instances[id] = new RegistryManager()
    }

    return instances[id]
  }
}

然后从您的组件中调用 getRegistryManager。

<script>
  import getRegistryManager from './mixins/registryManager';
  export default {
   mixins: [getRegistryManager("ComponentName")]
  }
</script>

在所有 vue 组件实例之间共享变量

Sharing variable across all vue component instances

vue.js

vue-component

vue-mixin