如何在Vue组件script部分访问i18n值配置Highcharts多语言

问题原因 #

$t 是挂载在Vue实例上的全局方法，在<script>的逻辑中直接调用时没有绑定实例上下文，因此会触发未定义报错。

解决方法 #

1. 基础调用（仅初始化读取一次多语言）

在$t前加this前缀指向当前组件实例即可，修改后代码如下：

<script>
import '@/plugins/highcharts.js'

export default {
  data() {
    return {
      options: {
        chart: {
          type: 'bar'
        },
        series: [{
          name: this.$t('test'), // 新增this前缀
          data: [1.0, 0.3, 0],
          color: '#beab9d'
        }],
        xAxis: {
          categories: ["1", "2", "3"]
        }
      }
    }
  }
}
</script>

该方案仅会在组件初始化时读取一次多语言值，若用户在页面不刷新的场景下切换语言，图表内的文字不会自动同步更新。

2. 响应式调用（支持切换语言自动更新）

如果需要适配语言实时切换的场景，把options从data移到computed计算属性中即可：

<script>
import '@/plugins/highcharts.js'

export default {
  computed: {
    options() {
      return {
        chart: {
          type: 'bar'
        },
        series: [{
          name: this.$t('test'),
          data: [1.0, 0.3, 0],
          color: '#beab9d'
        }],
        xAxis: {
          categories: ["1", "2", "3"]
        }
      }
    }
  }
}
</script>

原理是i18n的语言状态为响应式变量，计算属性会监听this.$t的依赖变化，语言切换时自动生成新的配置项，触发highcharts组件重新渲染，同步更新多语言内容。

补充：Vue3