如何让所有的静态字符串在一个地方

Question

我正在创建一个vue的web应用程序，我有几个动态内容的页面，也有几个主要是静态内容的页面。我想将所有这些静态字符串移动到一个地方。

一个选择可以使用vue-i18n或vue-multilanguage，这些给支持有内容的文件，如this，但是我真的有支持多国语言没有用的情况下，所以它也似乎有点超必杀我。

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

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

Answer 1

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

如果我不得不做一些事情：

1. 我想这些字符串是随处可见。
2. 我宁愿不必在所有组件中导入这些字符串，每次需要使用它们。
3. 我想存储空间是描述性的，这样我就不必来回检查我想要导入的内容。 [在我看来最困难的部分]

为了实现1，我们可以使用：

1. Vuex
2. 一个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必须提供。

为什么我最难叫第三点是：修的如果你改变组件的名字，你可能也不得不改变它在通过插件返回的object。这个问题可以通过多种方式进行处理。

Answer 2

，您可根据npm module包含你的字符串

Answer 3

JSON文件，如果你没有在项目中使用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，有集中的一切，让您可以在每个组件的使用干将。