# 国际化

本项目集合了国际化 i18n 方案。通过 [vue-i18n](https://github.com/kazupon/vue-i18n)而实现。

由于本项目 ui 框架使用了`element`，所以国际化的同时也要将其国际化。
[完整代码](https://github.com/adempiere/adempiere-vue/blob/master/src/lang/index.js)。
同时将当前 `lang` 语言存在 `cookie`之中，为了下次打开页面能记住上次的语言设置。

# 全局 lang

代码地址: [@/lang](https://github.com/adempiere/adempiere-vue/tree/master/src/lang)
目前配置了英文和中文两种语言。

同时在 `@/lang/index.js` 中引入了 `element-ui`的语言包

**使用：**

```js
// $t 是 vue-i18n 提供的全局方法，更多信息请查看其文档
$t('login.title')
```

# 异步 lang

有一些某些特定页面才需要的 lang，比如 `@/views/i18n-demo` 页面

```js
import local from './local'

this.$i18n.mergeLocaleMessage('en', local.en)
this.$i18n.mergeLocaleMessage('zh', local.zh)
```

# js 中使用 $t

如果你使用如 `select`组件，它的值是通过 `v-for`而来，如：

```html
<el-select v-model="value">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"/>
</el-select>
```

```js
this.options = [
  {
    value: '1',
    label: this.$t('i18nView.one')
  },
  {
    value: '2',
    label: this.$t('i18nView.two')
  },
  {
    value: '3',
    label: this.$t('i18nView.three')
  }
]
```

这种情况下，国际化只会执行一次，因为在 js 中的`this.options`只会在初始化的时候执行一次，它的数据并不会随着你本地 `lang`的变化而变化，所以需要你在`lang`变化的时候手动重设`this.options`。

```js
export default {
  watch: {
    lang() {
      this.setOptions()
    }
  },
  methods: {
    setOptions() {
      this.options = [
        {
          value: '1',
          label: this.$t('i18nView.one')
        },
        {
          value: '2',
          label: this.$t('i18nView.two')
        },
        {
          value: '3',
          label: this.$t('i18nView.three')
        }
      ]
    }
  }
}
```

# 移除国际化

在 `src/main.js` 中移除 `import i18n from './lang'` 并且删除 `src/lang` 文件夹。

并在 `src/layout/components/Levelbar`、`src/layout/components/SidebarItem`、`src/layout/components/TabsView` 等文件夹中 移除 `this.$t('route.xxxx')` 使用国际化的方式。

在<Badge text="v4.1.0+"/>版本之后，默认 master 将不再提供国际化。因为大部分用户其实是用不到国际化的，但移除国际化工作量又相当的大。

如果你有国际化需求的请使用 [i18n 分支](https://github.com/adempiere/adempiere-vue/tree/i18n)，它与 master 同步更新。