Vue - 使 output 从全局 function 反应

Question

I started using Vue some time ago, together with vue-cli and Single File Components. I have a "problem", that I want to have a global function that returns formatted text to the components (used in most of the components in my app) depending on the current (global) settings of that "function" (or class). I want it so that when the settings (in this example, currentKey) change, then all the components using this function get the value updated. So in short: currentKey changes - text gets re-drawn to match the new return value from test global function.

There is some additional logic involved, but that's the simplest example I came up with.

In the example you can see that there is a 5 second interval that cycles through the currentKey variable, therefore changing the output of the test function. I'd want the components to get updated accordingly each 5 seconds. I tried using computed values and other stuff I found, but couldn't get it to work the way I want.

How can I force the components to update whenever I change the currentKey variable?

 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

Reactivity is all about the properties of objects. When an object is observable Vue can track the reading and writing of its properties.

So all you need to do is make currentKey a property on an observable object and all the reactivity magic will kick in.

So long as you're using Vue 2.6 you can use Vue.observable directly to create an observable object. In earlier versions you'd need to create a dummy Vue instance and use the data function to apply reactivity to the object instead.

 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>

The example only includes rendering updates but any computed properties would also be triggered, just like they would with data property changes.

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