从vue.js filter返回vue实例(vue.js 2)

Question

我正在使用过滤器功能进行国际化：

<div>{{ "hello" | message }}<div>

消息是一个extract函数，取决于global vue.config.lang变量。

它的效果很好，但是如果我更改vue.config.lang，则消息不会重新发送。

我想随时随地vue.config.lang更改，所以我从

更改了过滤器函数

message => locale_messages[Vue.config.lang][message]

to

message => new Vue({
  template: '{{ message }}',
  computed: {
    message() { return locale_messages[Vue.config.lang][message]; }
  }
})

但行不通。获取此错误：

Uncaught TypeError: Converting circular structure to JSON
    at Object.stringify (<anonymous>)
    ....

我有什么可以做的使它起作用的吗？我是vue.js的新手，找不到工作解决方案。

Answer 1

就像埃文（Evan）所说的那样，过滤器应该是纯净的，因此thay不能将全局变量用作从外部数组中获取值的键。由于副作用。

所以，我的问题有三种解决方案：

• 用方法替换过滤器。
• 使用VUE-I18-N，一个简单而强大的翻译模块
• 使用商店系统（VUEX）WICH为您提供Getters，并帮助您管理全球状态。

人物我喜欢一起使用vuex和vue-i18-n。这样，我可以集中我的数据和使用的语言。我还可以使用商店以几种语言提供特定数据，并让Vue-i18-N关心项目中的所有字符串。

Answer 2

新手自我，因此不确定全局变量的工作原理，但是您绝对可以将params传递给自定义过滤器 - 甚至是VUE引用。您可以这样做：

<!-- this = a reference to the vue instance -->
<span class="display-3">{{value|FormatValue(this)}}</span>
[...]
props: ["aIsPercentNeeded"],
[...]
Vue.filter("FormatValue", function (aValue, aVueInstance)
{
  if (!aVueInstance["aIsPercentNeeded"])
  {
    return aValue;
  }
  return aValue + "%";
});