Vue - 使全局函数的输出是反应式的

Question

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

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

在示例中，您可以看到有一个 5 秒的间隔循环遍历 currentKey 变量，因此更改了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>

Answer 1

反应性是关于对象的属性。当一个对象是可观察的时，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://v2.vuejs.org/v2/api/#Vue-observable