Vue - 使 output 从全局 function 反应

Question

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

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

在示例中，您可以看到循环通过 currentKey 变量的间隔为 5 秒，因此更改了test function 的 output。 我希望组件每 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

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

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

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

 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