Question

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

一个选项可以是使用vue-i18n或vue-multilanguage，这些选项可以支持内容文件，例如this，但我确实没有支持多种语言的用例，所以它对我来说似乎有点过分了。

另一种选择可以是为所有字符串设置vuex存储，我已经将其用于状态管理。

这样做有什么好方法。

Answer 1

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

如果我不得不做些什么：

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

要达到1，我们可以使用：

Vuex
导出services/some.js。{/ li>的object文件
Plugins

我会选择plugins，因为：

我可以通过在组件中使用this来获取字符串，Vue.use(plugin)可以防止同一个插件使用两次，同时实现所有点（第3个仍然是一个难题破解）。只有我知道它的缺点可能会使vue-instance混乱。

因此插件可以设计为：

// 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中更改它。再次出现这个问题，可以通过多种方式处理。

Answer 2

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

Answer 3

如果您不在项目中使用vuex，请将您的内容放在一些javascript文件中，这些文件基本上都是包含所有静态内容的对象，并将其导入到您需要的地方，就像Belmin menionted I am using Vue js and python flask as my backend. I want to have some local variable set. How can it be done?

类似的方法可用于网址，配置，错误等。

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

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

3 个答案: