做语言转换操作的时候$I18n报错

Question

我把已经初始化i18n并且在main.就是配置过了，

能通过$t调用我在i18n.js定义的数据，

但是在做语言转换的时候，我通过点击切换语言时说我$i18n未定义，我想知道为什么？相应代码和报错图如下：

Answer 1

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
 
// 核心思想就是改变 useI18n 解构出来的locale
// 笔者 这里为了和页面中的其他变量 区别  - 取别名 i18nLanguage。  
const { locale: i18nLanguage } = useI18n()
 
const toggle = (languageKey) => {
  i18nLanguage.value = languageKey  // zh en
}
</script>
<template>
<el-button @click="toggle('zh')">点击切换中文</el-button>
<el-button @click="toggle('en')">点击切换英文</el-button>
</template>