Javascript 立即更改区域设置不相应地刷新vuejs组件

我有一个js类User，里面有一个矩对象：

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

我想根据应用程序的区域设置显示此日期。我正在使用VueJS。为了方便访问Vue组件中的力矩变量，我公开了力矩变量：

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中使用的实例不一样。所以我最终尝试了这个：

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

但结果是一样的：根本没有翻译！ 我还将其添加到我的用户类中：

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

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

谢谢你的帮助

类似问题： 我的应用程序有一个顶部栏，其中包含用于更改区域设置的选择输入。 呈现组件时，如果我更新区域设置，则不会重新呈现组件，因此日期格式仍然相同

什么能帮我找到一个干净的解决方案 阅读

实践中的解决方案 编辑

AppComponent

的html模板，以添加此属性

：key:“language”

，例如：

然后编辑您的

AppComponent

类：

数据：{
所选语言：“fr”
},
计算：{
语言：函数（）{
返回此.selectedLanguage；
}
}

当

selectedLanguage

值将被更改时，组件的

键

属性值将被更改，并将触发

AppComponent

重新渲染，其子级也将被重新渲染

要确保在全局重新渲染之前已更新矩配置，请确保在更新

selectedLanguage

之前调用

this.$moment.locale（newLocale）

方法

附言：

---

我已经从我使用的应用程序中翻译了这段代码，如果我遗漏了什么，请告诉我。

我只想与可能需要它的人分享我的解决方案。 我正在使用vuex为i18n存储lang，这里没有什么特别的

state:{locale:'en'}, //en by default                                                             
getters:{locale: (state) => state.locale,},                                   
mutations: { SET_LOCALE: (state, payload) => {locale = payload|| state.locale;}}                    
actions: {
SetLocale: async (context, payload) => {
  context.commit('SET_LOCALE', payload);
  await setLocale(payload.locale);
},

}

然后将基本下拉列表放到导航栏或您想要更改语言的位置，并添加方法以将新语言推送到存储区

 methods: {
    async setLocale(locale) {
        await this.$store.dispatch('SetLocale', {
            locale
        });
    },
},

vue应用上面的“密钥”解决方案，并观察商店数据的变化

<v-main :key="locale">
<transition name="fade-transform" mode="out-in">
    <keep-alive>
        <router-view />
    </keep-alive>
</transition>                                                                      

---

每次更改i18n语言时，这将迫使您导入新语言，并用正确的语言刷新主要组件。

谢谢您的回答。

....... 
 computed: {
    ...mapGetters(["errors", "locale"])
},
watch: {
    locale: {
        immediate: true,
        handler(newVal, oldVal) {
            this.setLang(newVal)
        },
    },
},
methods: {
    setLang(lang) {
        this.$moment.locale(lang);
        console.log('dil değişti', lang)
    }
},