如何使Vue全局函数返回值随全局配置变化自动更新组件？

你的核心问题在于普通JavaScript变量currentKey不是Vue的响应式数据，Vue无法追踪它的变化，所以即使它的值改变了，调用$test的组件也不会触发重新渲染。要解决这个问题，我们需要把currentKey变成Vue能监听的响应式数据，再调整全局函数的实现方式。

方案一：利用根实例的响应式状态（适合小型项目） #

我们可以把currentKey放到根Vue实例的data中，让它成为响应式数据，然后修改$test函数，让它依赖这个响应式状态。这样当currentKey变化时，所有用到$test的组件都会自动更新。

修改后的完整代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component1></component1>
  <component2></component2>
</div>

<script>
Vue.component('component1', { 
  template: '<div v-html="$test(\'name\')"></div>', // 用v-html渲染HTML标签
});
Vue.component('component2', { 
  template: '<div v-html="$test(\'name2\')"></div>',
});

const 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',
  }
};

// 将$test改为依赖根实例的响应式currentKey
Vue.prototype.$test = function(name) {
  return table[this.$root.currentKey][name];
};

new Vue({ 
  el: '#app',
  data() {
    return {
      currentKey: 'keyone' // 把currentKey设为根实例的响应式数据
    }
  },
  mounted() {
    setInterval(() => {
      this.currentKey = this.currentKey === 'keyone' ? 'keytwo' : 'keyone';
      console.log('Key changed to', this.currentKey);
    }, 5000);
  }
});
</script>

关键改动说明： #

• 把currentKey移到根实例的data中，成为响应式属性，让Vue能监听它的变化
• 修改$test函数，通过this.$root.currentKey获取响应式状态，这样组件调用$test时会自动建立依赖关系，状态变化时触发重新渲染
• 组件模板改用v-html，因为你的返回值包含HTML标签，{{}}会转义标签内容，v-html可以正确渲染富文本

方案二：使用全局状态管理（适合中大型项目） #

如果你的项目比较复杂，推荐用Vuex来管理全局状态，这样更规范，也方便扩展更多全局配置：

1. 安装并引入Vuex
2. 创建store，定义currentKey状态和修改它的mutation
3. 修改$test函数，从store中获取currentKey

示例核心代码：

import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    currentKey: 'keyone'
  },
  mutations: {
    toggleKey(state) {
      state.currentKey = state.currentKey === 'keyone' ? 'keytwo' : 'keyone';
    }
  }
})

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

new Vue({ 
  el: '#app',
  store,
  mounted() {
    setInterval(() => {
      this.$store.commit('toggleKey');
      console.log('Key changed to', this.$store.state.currentKey);
    }, 5000);
  }
});

这样所有组件使用$test时都会依赖Vuex的响应式状态，状态变化时自动更新。

为什么之前的计算属性没用？ #

你之前尝试计算属性没生效，大概率是因为计算属性依赖的是普通变量currentKey，而不是响应式数据。只要让计算属性依赖响应式的currentKey（比如根实例或Vuex的状态），计算属性就能正常触发更新。

内容的提问来源于stack exchange，提问作者hazelnutek