- 背景：
我有一個 SPA (Vuejs)，我在前端和后端都實作了本地化。更改語言時，內容更新成功，無需重新加載頁面。 - 問題：
但是某些內容（例如所選語言的產品說明）來自 API，當我更改語言時，該 API 不會自動更新。如果我重繪 頁面或再次呼叫 API，它就可以作業。 - 問題：
在不重繪 頁面并手動呼叫所有 API 的情況下更改來自 API 的語言相關內容的最佳實踐是什么。
謝謝！
uj5u.com熱心網友回復：
我相信有很多方法可以做你想做的事。例如。我們的模型有一些可以本地化的欄位，但我們只支持三種語言，而且欄位相對較短。
在這種情況下，我們只讓后端 rest api 回傳字串的所有本地化版本，例如：
GET /products 可以回傳：
[{
sku: '1',
name: {
en: 'Product name',
nl: 'Productnaam',
fr: 'Nom du produit'
}
}]
然后我們根據路由引數在 VueJs 中顯示它... {{product.name[$route.params.locale] || product.name[en]}} （我們有一個可組合的方法來代替，但你明白了。
但是，對于某些端點，您可能并不總是希望回傳服務器的所有本地化版本，只是因為它太大（例如，您以多種語言發布而支持 5 種語言的博客文章可能只會生成您不想要的有效負載到...）
在這種情況下，您只需在 vuejs 中觀察您的語言環境的變化，并獲取本地化版本。
我不喜歡我自己的第三個選項是讓“語言切換”基本上重新加載整個頁面......
無論哪種方式 - 有很多方法可以滿足您的需求，這完全取決于您的用例和您的個人喜好。
uj5u.com熱心網友回復：
我設法做到了，我不知道這是否是最佳實踐，但它是一個可行的解決方案，對其他人有用：
應用程式.vue：
- 我有一個
LocaleChanger組件，它localChanged在每次語言更改時發出。 - 視圖被加載到
router-view所以我添加rerenderKey到它的鍵。并且當它發生變化時，所有內容都會在當前視圖中重新渲染（包括相應組件的 API）。 - 并且由于我的所有 API 都在其中呼叫，因此它們將再次被呼叫。
<template>
<LocaleChanger @localChanged="forceRerender"/>
<div id="nav">
<router-link :to="{ name: 'Home', params: {'lang':$i18n.locale}}">{{$t('pages.home')}}</router-link> |
</div>
<router-view :key="rerenderKey"></router-view>
</template>
<script>
data () {
return {
rerenderKey: 0
};
},
methods: {
async forceRerender(){
await this.$router.push({name: this.$route.name, params: { ...this.$route.params, lang: this.$i18n.locale }})
this.rerenderKey = 1;
},
}
</script>
由于我的 API-s 需要Accept-language標頭，因此我將它添加到 main.js 中axios.interceptors.request
axios.interceptors.request.use(
function (config) {
config.headers['Accept-Language'] = store.state.locale;
return config;
},
function (error) {
return Promise.reject(error);
}
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/321702.html
上一篇：Reactjs：將API資料傳遞給props中的子組件。可以console.logprops但是不能渲染資料
下一篇：如何從api獲取影像？