VUE3 vue-i18n Must be called at the top of a `setup` function

Question

在请求网络接口后直接i18n后，报错

useI18n().t('menu.home')

Test.vue?a796:106 SyntaxError: Must be called at the top of a setup function

at createCompileError (message-compiler.esm-bundler.js?f92f:32)
at createI18nError (vue-i18n.esm-bundler.js?47e2:66)
at useI18n (vue-i18n.esm-bundler.js?47e2:2029)
at i18nRender (index.js?bf0f:52)
at i18n (RoleMenu.vue?a796:84)
at eval (RoleMenu.vue?a796:94)

Answer 1

临时找到一个方案,使用 getCurrentInstance 的proxy，然后proxy.$t('opt.ok')

import {  getCurrentInstance} from 'vue'

  setup() {
            
          const { proxy }  = getCurrentInstance()
          const handleSelect = ({ key }) => {
                if (key === 'delete') {
                    batchDeleteRole(toRaw(state.selectedRowKeys)).then(res => {
                        if (res.success) {
                            table.value.refresh(true)
                          message.success(proxy.$t('opt.ok'))
                        } else {
                            message.error(res.message)
                        }
                    })
                }
            }
 }

Answer 2

// lang/index
import { createI18n } from 'vue-i18n'

// import 'default-passive-events'
import en from './en'
import cn from './cn'

const i18n = createI18n({
  legacy: !true,
  globalInjection: true,
  locale: localStorage.getItem('language') || 'cn',
  messages: {
    en,
    cn,
  },
})

export default i18n

import i18n from '@/lang/index'

const { t, } = i18n.global