Return 来自 vue.js 过滤器的 vue 实例 (Vue.js 2)

Question

我正在使用这样的国际化过滤器功能：

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

message 是一个过滤函数，依赖于全局 Vue.config.lang 变量。

效果很好，但如果我更改 Vue.config.lang，消息不会重新呈现。

我想在任何时候 Vue.config.lang 更改时重新呈现消息，所以我将过滤器功能从

更改为

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

到

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 所说，过滤器应该是 pure，因此他们不能使用全局变量作为键从外部数组中获取值。因为有副作用。

那么，针对您的问题，我想到了三种解决方案：

按方法替换过滤器。
使用vue-i18-n，一个简单而强大的翻译模块
使用存储系统 (vuex) 为您提供 getter，并帮助您管理全局状态。

我个人喜欢同时使用 vuex 和 vue-i18-n。这样我就可以集中我的数据和使用的语言。我还可以使用商店以多种语言提供特定数据，让 vue-i18-n 关心项目中的所有字符串。

Answer 2

我自己是 Vue 的新手，所以不太清楚全局变量是如何工作的，但你绝对可以将参数传递给自定义过滤器 - 甚至是 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 + "%";
});

Return 来自 vue.js 过滤器的 vue 实例 (Vue.js 2)

Return vue instance from vue.js filter (Vue.js 2)

javascript

vue.js

vuejs2