时间戳

首页 > 解决方案 > 使用 locale.json 中的键覆盖 store.js

vue.js - 使用 locale.json 中的键覆盖 store.js

问题描述

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

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

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

所以如果我这样做： 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为frorit它将更改显示的语言。但当然我需要从网站而不是代码中更改语言。

也许它必须是这样的：

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"
}

标签： vue.jsinternationalizationvuexvue-routervue-i18n

解决方案

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

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>

推荐阅读