如何在Vuex商店中使用i18n

pieyvz9o 于 2023-03-24 发布在 Vue.js

关注(0)|答案(3)|浏览(347)

我有一个项目，我需要在Vuex商店内进行翻译。但是当我试图在商店内使用i18n进行翻译时，我总是遇到错误。
我尝试使用下面的import语句在存储中导入i18n的示例。

import i18n from '@/i18n';

在我的Vue项目的main.js文件中，我导入并使用i18n文件：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { store } from './store';
import i18n from './i18n';

createApp(App).use(i18n).use(store).use(router).mount('#app');

这是我的i18n.js文件，位于src文件夹中：

import { createI18n } from 'vue-i18n';

function loadLocaleMessages() {
  const locales = require.context(
    './locales',
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  );
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default createI18n({
  legacy: false,
  locale: localStorage.locale ?? 'nl',
  globalInjection: true,
  messages: loadLocaleMessages(),
});

vue.js

来源：https://stackoverflow.com/questions/69000971/how-to-use-i18n-in-the-vuex-store

3条答案

按热度按时间

e4yzc0pl1#

对于那些在Vuex商店中使用i18 n的Vue 3用户来说，我可以这样实现：

translations/index.js*基本设置 *

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
    fallbackLocale: 'en',
    globalInjection: true,
    messages: messages
})

export default i18n

main.js*导入store和i18 n并在Vue应用示例中使用 *

import i18n from './translations'
import store from './store'

const app = createApp(App)

app.use(store)
app.use(i18n)
app.mount('#app')

Vuex store module file with getter example：

import i18n from './translations'

const getters = {
  getNotification: (state) => {
      ...
      notification.title = i18n.global.t('notification.title')
      ...
  }
}

赞(0）回复(0）举报 2023-03-24

xnifntxz2#

我在Vuex中使用了vue-i18 n。也许它对你有帮助。
创建vue-i18n.js文件如下;

import Vue from "vue";
import VueI18n from "vue-i18n";

// Localisation language list
import { locale as en } from "@/core/config/i18n/en.js";
import { locale as ch } from "@/core/config/i18n/ch.js";

Vue.use(VueI18n);

let messages = {};
messages = { ...messages, en, ch };

// get current selected language
const lang = localStorage.getItem("language") || "en";

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: lang, // set locale
  messages // set locale messages
});

export default i18n;

并将其导入到Vue的main.js文件中;

import i18n from "@/core/plugins/vue-i18n";

new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
}).$mount('#app')

将其导入到您的商店或模块中（我在我的vuex模块中导入）;

import i18n from "@/core/plugins/vue-i18n";

然后在任何你想要的地方使用它（action，mutation，setter或者getter）;

const sample = i18n.t('ERRORS.NETWORKERROR');

js文件;

export const locale = {
  LOGIN: {
    OPERATORID: "Operator ID",
    SIGNIN:"Sign In",
    SCANCARD: "Scan Card"
  },
  ERRORS: {
    NETWORKERROR: "Network error occurred!",
    UNAUTHUSERERROR: "Unauthorized user!",

  }
};

赞(0）回复(0）举报 2023-03-24

dojqjjoe3#

我可以在我的商店里使用这个.$i18n：

this.$i18n.t('campaign.setPhotodoc-error')

赞(0）回复(0）举报 2023-03-24

我来回答

如何在Vuex商店中使用i18n

3条答案

相关问题

热门标签

最新问答