te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to use i18n in the Vuex store - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to use i18n in the Vuex store - Stack Overflow

    javascript - How to use i18n in the Vuex store - Stack Overflow

    programmeradmin3浏览0评论

    I have a project where I need to do translations inside the Vuex store. But I keep on getting an error when trying to translate using i18n inside the store.

    I have tried to import and instance of i18n inside the store using the following import statement. But I then I get an error Uncaught TypeError: _i18n__WEBPACK_IMPORTED_MODULE_3__.default.t is not a function

    import i18n from '@/i18n';

    In the main.js file of my Vue project I import and use the i18n file:

    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');

    This is my i18n.js file that is located inside the src folder:

    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(),
});

    I have a project where I need to do translations inside the Vuex store. But I keep on getting an error when trying to translate using i18n inside the store.

    I have tried to import and instance of i18n inside the store using the following import statement. But I then I get an error Uncaught TypeError: _i18n__WEBPACK_IMPORTED_MODULE_3__.default.t is not a function

    import i18n from '@/i18n';

    In the main.js file of my Vue project I import and use the i18n file:

    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');

    This is my i18n.js file that is located inside the src folder:

    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(),
});
    • javascript
    • vue.js
    • internationalization
    • vue-i18n
    Share Improve this question asked Aug 31, 2021 at 14:56 StephenStephen 1,1835 gold badges29 silver badges63 bronze badges
    Add a ment  | 

    3 Answers 3

    Reset to default 8

    For Vue 3 guys out there struggling with usage of i18n in the Vuex store, I was able to achieve it like this:

    translations/index.js with basic setup

    import { createI18n } from 'vue-i18n'

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

export default i18n

    main.js Import store and i18n and use them in Vue app instance

    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')
      ...
  }
}

    I used vue-i18n in Vuex. Maybe it helps to you.

    Create vue-i18n.js file like this;

    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;

    and import it to Vue in main.js file;

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

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

    import it inside your store or modules ( i imported in my vuex module);

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

    then use it wherever you want (action, mutation, setter or getter);

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

    en.js file;

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

  }
};

    I can use this.$i18n in my store:

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

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论