使用来自 locale.json 的密钥覆盖 store.js

Question

我需要将数据从当前语言环境动态传递到 store.js 中的数组。该数组如下所示：

skills: [
      {
        id: "1",
        type: "hard",
        title: "Technical Skills",
        mastery: "low",
      },
        ]
});

所以我需要用语言环境 json 文件中的数据替换此 title: "Technical skills",。

所以如果我这样做： store.js:

import en from "../src/locales/en.json";
import fr from "../src/locales/fr.json";
import it from "../src/locales/it.json";
skills: [
      {
        id: "1",
        type: "hard",
        title: `${en.hardSkills.TechnicalSkills}`,
        mastery: "low",
      },
export { store };

它确实有点用。如果我将 en 更改为 fr 或 it，它将更改显示的语言。但当然我需要从网站而不是代码更改语言。

也许它必须是这样的：

title: `${$i18n.locale.hardSkills.TechnicalSkills}`,

但在这种情况下 $i18n 未定义。

想不通

locales/fr.json

中的对象

"hardSkills" : {
  "TechnicalSkills" : "Compétences techniques"
}

和locales/it.json

"hardSkills" : {
  "TechnicalSkills" : "Abilità tecniche"
}

当然还有locales/en.json

"hardSkills" : {
  "TechnicalSkills" : "Technical skills"
}

Answer 1

好的，完成了。这是解决方案。

store.js:

skills: [
     {
       id: "1",
       type: "hard",    
     },
     {
       id: "2",
       type: "hard",        
     },

fr.json: //保持结构不变，其他语言都一样。

 "hardSkills": {
    "Technical skills":  "Compétences techniques",
    "Computer skills": "Compétences informatiques",
}

*.vue

   <v-col
              v-for="hardSkill in hardSkills"
              :key="hardSkill.id"
              cols="auto"
              
            >
              {{ $t(`hardSkills.${hardSkill.title}`) }}
            
   </v-col>

使用来自 locale.json 的密钥覆盖 store.js

Overriding store.js with key from locale.json

internationalization

vue.js

vue-router

vuex

vue-i18n