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

Question

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

一个选项可以是使用 vue-i18n or vue-multilanguage, these gives support to have content files like this，但我确实没有支持多种语言的用例，所以对我来说也有点过头了。

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

有什么好的方法可以做到这一点。

Answer 1

您可以使用 JSON 个包含您的字符串的文件制作一个 npm module

Answer 2

如果您不在项目中使用 vuex，请将您的内容放在一些 javascript 文件中，这些文件基本上是包含所有静态内容的对象，然后将它们导入到您需要的地方，就像 Belmin 提到的那样

类似的方法可用于 url、配置、错误等。

如果您使用 vuex，请将所有内容集中在那里并制作可在每个组件中使用的 getter。

Answer 3

我不知道这样做的标准方法，这也适用于所有网络框架。也就是说，这是一个有趣且有效的问题。

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

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

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

Vuex
一个 services/some.js 文件导出 object.
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 提供的几乎所有内容。

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

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

How to have all the static strings in one place

javascript

vuejs2

vue.js

vuex