javascript - 立即更改语言环境不会相应地刷新 vuejs 组件

Question

我有一个 js 类 User，里面有一个 moment 对象:

import moment from 'moment'
class User {
    expirationDate = moment();
}

我想根据应用程序的区域设置显示此日期。我正在使用VueJS。为了允许在 Vue 组件内轻松访问 moment 变量，我公开了 moment 变量:

Vue.prototype.$moment = moment;

在我的一个组件内，我有一个按钮，允许用户更改其区域设置。

this.$moment.locale(newLocale); // newLocale can be en-us, zh-cn, ....

但日期未翻译。为了更进一步，我在同一模块内创建了以下创建的函数:

  created: function() {
    setInterval(() => {
      console.log(this.$moment.locale());
      console.log(this.user.expirationDate.format('ll'));
      console.log(this.$moment().format('ll'));
    }, 1000);
  }

这是结果

UserProfile.vue?ebc3:52 en
UserProfile.vue?ebc3:52 Nov 30, 2018
UserProfile.vue?ebc3:53 Nov 21, 2018
UserProfile.vue?ebc3:51 zh-cn
UserProfile.vue?ebc3:52 Nov 30, 2018
UserProfile.vue?ebc3:53 2018年11月21日

所以我不明白为什么我的用户时刻的格式不起作用。我担心 $moment 和我的 user.js 中使用的 moment 变量的实例不一样。所以我最终尝试了这个:

console.log(this.$moment(this.user.expirationDate).format('ll'));

但结果是一样的:根本没有翻译!我还将其添加到我的 User 类中:

import moment from 'moment'
class User {
    expirationDate = moment();
    constructor(data) {
        setInterval(()=>{console.log('from user.js > ' + moment.locale())}, 1000)
    }
}

并通知区域设置正确。所以这似乎不是一个可变的问题......

感谢您的帮助!

Answer 1

类似问题:

我的应用程序有一个顶栏，其中包含用于更改区域设置的选择输入。当渲染组件时，如果我更新区域设置，该组件不会重新渲染，因此日期格式仍然相同......

什么可以帮助我找到干净的解决方案

阅读this article

实践中的解决方案

编辑AppComponent的html模板，添加此属性:key:"language"，例如:

<div :key="language">
    <router-view></router-view>
</div>

然后编辑您的 AppComponent 类:

data: {
    selectedLanguage: 'fr'
},
computed: {
    language: function () {
      return this.selectedLanguage;
    }
}

当selectedLanguage值发生变化时，组件的key属性值将发生变化，并会触发AppComponent重新渲染并它的 child 也将被重新渲染。

为了确保在全局重新渲染之前更新了 moment 配置，请确保在更新 selectedLanguage< 之前调用 this.$moment.locale(newLocale) 方法 .

PS:我已经从使用 Vue Property Decorator 的应用程序翻译了这段代码和 Vuex ，如果我错过了什么，请告诉我。