Vue - 使全局函数的输出反应答案

【问题标题】：Vue - make output from global function reactiveVue - 使全局函数的输出反应
【发布时间】：2020-02-16 04:59:31
【问题描述】：

我前段时间开始使用 Vue，以及 vue-cli 和单文件组件。我有一个“问题”，我想要一个全局函数，根据该“函数”（或类）的当前（全局）设置，将格式化文本返回给组件（在我的应用程序中的大多数组件中使用） .我希望它在设置（在本例中为 currentKey）更改时，使用此函数的所有组件都会更新值。简而言之：currentKey 更改 - 重新绘制文本以匹配来自 test 全局函数的新返回值。

涉及一些额外的逻辑，但这是我想出的最简单的例子。

在示例中，您可以看到循环通过 currentKey 变量的时间间隔为 5 秒，因此更改了 test 函数的输出。我希望组件每 5 秒相应更新一次。我尝试使用计算值和我找到的其他东西，但无法让它按照我想要的方式工作。

如何在更改 currentKey 变量时强制组件更新？

Vue.component('component1', {
  template: '<div>{{ $test("name") }}</div>',
});

Vue.component('component2', {
  template: '<div>{{ $test("name2") }}</div>',
});

var table = {
  keyone: {
    name: 'TEST NAME FROM FIRST KEY',
    name2: 'TEST NAME 2 FROM FIRST KEY',
  },
  keytwo: {
    name: 'TEST NAME FROM <b>SECOND</b> KEY',
    name2: 'TEST NAME 2 FROM <b>SECOND</b> KEY',
  }
};
var currentKey = 'keyone';

Vue.prototype.$test = function(name) {
  return table[currentKey][name];
};

setInterval(function() {
  if(currentKey == 'keyone')
    currentKey = 'keytwo';
  else currentKey = 'keyone';
  console.log('Key changed to', currentKey);
}, 5000);

new Vue({
    el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <component1></component1>
  <component2></component2>
</div>

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

反应性是关于对象的属性。当一个对象是 observable 时，Vue 可以跟踪其属性的读取和写入。

所以你需要做的就是让currentKey 成为一个可观察对象的属性，所有的反应魔法都会发挥作用。

只要您使用的是 Vue 2.6，您就可以直接使用Vue.observable 来创建一个可观察对象。在早期版本中，您需要创建一个虚拟 Vue 实例并使用 data 函数将反应性应用于对象。

Vue.component('component1', {
  template: '<div>{{ $test("name") }}</div>',
});

Vue.component('component2', {
  template: '<div>{{ $test("name2") }}</div>',
});

var table = {
  keyone: {
    name: 'TEST NAME FROM FIRST KEY',
    name2: 'TEST NAME 2 FROM FIRST KEY',
  },
  keytwo: {
    name: 'TEST NAME FROM <b>SECOND</b> KEY',
    name2: 'TEST NAME 2 FROM <b>SECOND</b> KEY',
  }
};

var config = Vue.observable({
  currentKey: 'keyone'
});

Vue.prototype.$test = function(name) {
  return table[config.currentKey][name];
};

setInterval(function() {
  if(config.currentKey == 'keyone')
    config.currentKey = 'keytwo';
  else config.currentKey = 'keyone';
  console.log('Key changed to', config.currentKey);
}, 5000);

new Vue({
    el: '#app',
});

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <component1></component1>
  <component2></component2>
</div>

该示例仅包括渲染更新，但也将触发任何计算属性，就像 data 属性更改一样。

https://vuejs.org/v2/api/#Vue-observable

【讨论】：