如何讓所有的靜態字符串在一個地方

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，有集中的一切，讓您可以在每個組件的使用干將。