从 vue.js 过滤器返回 vue 实例（Vue.js 2）

Posted 2023-03-07

【中文标题】从 vue.js 过滤器返回 vue 实例（Vue.js 2）

【英文标题】：Return vue instance from vue.js filter (Vue.js 2)

【发布时间】：2017-05-13 19:31:37

【问题描述】：

我正在使用过滤器功能进行国际化，如下所示：

<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 新手，找不到可行的解决方案。

【问题讨论】：

在你的位置上，我会尝试深入研究其中的一些组件：github.com/vuejs/awesome-vue#i18n 我想你可以找到一些线索，你应该如何在 Vue 中使用 i18n，因为我认为你做错了...

现在消息是一个组件吗？你能提供一些代码吗？

【参考方案1】：

就像 Evan 说的，过滤器应该是pure，所以不能使用全局变量作为键来从外部数组中获取值。因为副作用。

所以，我想到了三种解决方案：

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

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

【参考方案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 + "%";
);