VUE：在 vue 3.x 中使用 i18n

Posted 2023-04-07

参考技术A vue 3.x 已经发布一段时间了，如果你在使用，并且有国际化的需求，希望本文能帮到你。

在 vue 中配置国际化，一般使用 vue-i18n。由于目前 v8 版本的 vue-i18n 仅支持 vue 2.x，这里我们需要安装 9 或以上的版本。

NPM：

Yarn：

PNPM：

npm 会自动判断你的 Vue 版本，如果不是 3.0 以上的版本，则会报错：

其他方法可以查看官网： https://vue-i18n.intlify.dev/installation.html

安装完成之后，就可以创建 i18n 实例了，这里可以根据自己的喜好，在任何地方创建。

为了方便管理，我是在 src/i18n/index.ts 创建。

创建好之后，就可以在入口文件引入了。vue 3.x 的入口文件默认是根目录下的 main.ts 或 main.js 。

引入之后，就可以使用了。使用方法和 vue 2.x 一样，都是通过 $t 方法获取语言包中的值。

渲染后的结果：

到这里就大功告成！

Vue.JS - 如何在 Vue.JS 中使用 localStorage

【中文标题】Vue.JS - 如何在 Vue.JS 中使用 localStorage

【英文标题】：Vue.JS - how to use localStorage with Vue.JS

【发布时间】：2017-05-16 12:07:22

【问题描述】：

我正在使用 Vue.JS 开发 Markdown 编辑器，我尝试使用 localStorage 来保存数据，但我不知道如何在用户键入时将新值保存到 Vue.JS 中的数据变量！

【参考方案1】：

您可以轻松使用 Vue 中的本地存储：

存储：

localStorage.storedData = this.input;

获取数据：

let value = localStorage.storedData;

参考：https://vuejs.org/v2/cookbook/client-side-storage.html

【参考方案2】：

您可以使用 v-model 将变量绑定到每次更改，或者您可以将其放入计算： section.computed 就像 vue.js 的生命钩子，当它的值更改时它会重新渲染组件。

【参考方案3】：

您只需执行以下操作即可保存在localStorage

localStorage.setItem('YourItem', response.data)

您可以使用：

localStorage.getItem('YourItem')

要从localStorage 中删除它：

localStorage.removeItem('YourItem')

【参考方案4】：

注意这是对我的问题的修改，但我按照@nathanvda 的建议单独回答。

---

我找到了我正在寻找的解决方案。首先使用 watch 方法来检测你存储数据的变量的变化，如下所示：

watch: 
  input: function () 
    if (isLocalStorage() /* function to detect if localstorage is supported*/) 
      localStorage.setItem('storedData', this.input)
    
  

这将在用户添加新输入时更新变量的值。

然后像这样将新值分配给变量：

app.input = localStorage.getItem('storedData');

就是这样:)