Quasar框架下如何在vuex模块中正确导入使用vue-i18n？

错误原因 #

• useI18n 是Vue3组合式API专属方法，仅允许在组件的setup函数、<script setup>代码块，或者自定义组合式函数内部调用，普通JS/TS文件、Vuex逻辑不属于该上下文，因此触发调用位置错误。
• 第二种写法存在两个问题：
  1. 你的boot文件中i18n是命名导出（export { i18n }），不是默认导出，import i18n from 'boot/i18n'拿到的是Quasar的boot注册函数，不是i18n实例
  2. vue-i18n v9+的全局翻译方法挂载在i18n.global属性下，直接调用i18n.t不存在对应方法

正确使用方法 #

直接导入boot文件中导出的i18n实例，通过global.t调用翻译方法即可：

// vuex 或其他任意JS/TS文件中导入
import { i18n } from 'boot/i18n'

// 调用翻译
const text = i18n.global.t('common.user')

Vuex使用示例 #

// store/modules/user.js
import { i18n } from 'boot/i18n'

export default {
  state: {
    notifyMsg: ''
  },
  mutations: {
    SET_NOTIFY(state) {
      state.notifyMsg = i18n.global.t('common.loginSuccess')
    }
  },
  actions: {
    login({ commit }) {
      // 登录逻辑
      commit('SET_NOTIFY')
    }
  }
}

内容的提问来源于stack exchange，提问作者Sanzhar Alimkhanov