Javascript 如何将所有静态字符串放在一个位置

我正在创建一个vue webapp，我有几个页面包含动态内容，也有几个页面包含大部分静态内容。我想把所有这些静态字符串移到一个地方

一种选择是使用或，它们支持像这样的内容文件，但我真的没有支持多种语言的用例，所以对我来说似乎也有点过头了

另一个选项是为所有字符串提供vuex存储，我已经在使用vuex进行状态管理

---

什么是实现这一点的好方法。

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

npm模块

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

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

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

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

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

我希望这些字符串在任何地方都可用

我宁愿不必在所有组件中导入这些字符串，也不必在每次需要使用它们时导入这些字符串

我希望存储空间是描述性的，这样我就不必来回检查要导入的内容。[我认为最难的部分]

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

Vuex

导出

对象的
services/some.js
文件

插件

我会同意，因为：

我可以通过在组件中使用

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>

{{$getStringFor（，'key1'）}

您可以在方法中使用类似于

this.$getStringFor（，key）

的内容。几乎所有的

vuejs

都能提供

---

为什么我把第三点称为最难的一点是：维护如果您更改组件名称，您可能还必须在插件返回的

对象中更改它。同样，这个问题可以通过多种方式解决。
如果您的应用程序中已经没有使用Vuex，则无需使用Vuex，这可能会有点过分-您可以使用简单对象并将所有内容存储在那里