Vuei18n 在数组中的使用方式

Vuei18n 是 Vue.js 官方提供的国际化插件。在实际开发中，我们通常需要在不同语种下展示不同的文案，这时候就需要使用 Vuei18n 来实现多语言切换。

Vuei18n 在数组中的使用方式非常方便，可以简单实现不同语种下的文本数据复用。下面是具体步骤：

1. 安装 Vuei18n

Vuei18n 可以通过 npm 安装：

npm install vue-i18n --save

2. 引入 Vuei18n

在 main.js 中引入 Vuei18n：

import Vuei18n from 'vue-i18n'
Vue.use(Vuei18n)

3. 添加语言资源文件

在 src 目录下新建 i18n 文件夹，用于存放各语言的资源文件。

在 i18n 文件夹下新建 lang-zh.js 和 lang-en.js 两个文件，分别用于存放中文和英文的文本数据。

// lang-zh.js
export default {
  message: {
    hello: '你好',
    world: '世界'
  }
}

// lang-en.js
export default {
  message: {
    hello: 'Hello',
    world: 'World'
  }
}

4. 配置 Vuei18n

在 main.js 中完成 Vuei18n 配置：

import Vuei18n from 'vue-i18n'
import langZh from '@/i18n/lang-zh'
import langEn from '@/i18n/lang-en'

Vue.use(Vuei18n)

const i18n = new Vuei18n({
  locale: 'zh', // 默认语言
  messages: {
    zh: langZh,
    en: langEn
  }
})

在以上代码中，我们引入了两个语言资源文件，配置了默认语言为中文（zh），并注册了 i18n 插件。

5. 在组件中使用文本数据

在组件中使用 Vuei18n 的 $t 方法获取对应语言的文本数据，然后展示到页面上。

<template>
  <div>
    <p>{{ $t("message.hello") }}, {{ $t("message.world") }}!</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ $t(`list.${item}.name`) }}：{{ $t(`list.${item}.desc`) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2']
    }
  }
}
</script>

在以上代码中，我们使用 $t 方法获取了 message 对象下的 hello 和 world 属性值，同时在列表中使用 $t 方法获取了 list 对象中的 name 和 desc 属性值。

以上是数组中使用 Vuei18n 的完整示范。在实际开发中也可以像这样，将文本数据存放在数组中，方便进行逻辑处理与复用。