javascript - 如何将所有静态字符串放在一个地方

Question

我正在创建一个 vue webapp，我有几个包含动态内容的页面和几个主要包含静态内容的页面。我想将所有这些静态字符串移动到一个地方。

一个选项可以是使用 vue-i18n或 vue-multilanguage , 这些支持拥有像 this 这样的内容文件, 但我真的没有支持多种语言的用例，所以对我来说它也有点过头了。

另一种选择是为所有字符串创建一个 vuex 存储，我已经在使用 vuex 进行状态管理。

执行此操作的好方法是什么。

Answer 1

我不知道执行此操作的标准方法，而且这将适用于所有网络框架。也就是说，这是一个有趣且有效的问题。

如果我必须为此做点什么:

1. 我希望这些字符串随处可用。
2. 我希望不必在所有组件中以及每次需要使用它们时都导入这些字符串。
3. 我希望存储空间具有描述性，这样我就不必来回检查要导入的内容。 [我认为最难的部分]

要实现 1，我们可以使用:

1. Vuex
2. A services/some.js导出 object 的文件.
3. Plugins

我会选择 plugins因为:

我可以仅使用 this 来获取字符串在组件中，Vue.use(plugin)防止同一个插件被使用两次，同时获得所有的分数(第三个仍然是一个棘手的难题)。我所知道的唯一缺点可能会使 vue 实例困惑。

所以插件可以这样设计:

// stringsHelperPlugin.js
const STRING_CONST = {
  [component_1_Name]: {
    key1: val1,
    key2: val2,
    ....
  },
  [component_2_Name]: {
    key1: val1,
    key2: val2,
    ....
  },
  ...
}

StringConst.install = function (Vue, options) {
  Vue.prototype.$getStringFor = (componentName, key) => {
    return STRING_CONST['componentName'][key]
  }
}

export default StringConst

在main.js这可以像这样使用:

import StringConst from 'path/to/plugin'

Vue.use(StringConst)

你可以像这样在组件模板中使用它:

<div>
 {{ $getStringFor(<component_1_name>, 'key1') }}
</div>

你可以使用类似 this.$getStringFor(<componentName>, key) 的东西在一个方法中。几乎所有vuejs必须提供。

为什么我称第 3 点最难:维护 如果您更改组件名称，您可能还必须在 object 中更改它。由插件返回。又是这个问题，可以通过多种方式处理。