Javascript 全局更改运行时上的即时区域设置（使Vue.prototype.moment成为被动）

我正在将瞬间导入Vue，如下所示：

import moment from 'moment-timezone/builds/moment-timezone-with-data-2012-2022';
Vue.prototype.moment = moment;

然后在我的

created（）

中，我设置了我想要的语言。 请记住，这适用于刷新，但不适用于运行时

export default new Vue({
   render: h => h(BaseApp), 

   mounted() {

      let supportedLanguages = ['tr', 'etc'];

      supportedLanguages.forEach((val) => {
            moment.locale(val, {
                months: this.$i18n.messages[val]._months_,
                monthsShort: this.$i18n.messages[val]._months_short_,
                monthsParseExact: true,
                weekdays: this.$i18n.messages[val]._weekdays_,
                weekdaysShort: this.$i18n.messages[val]._weekdays_short_,
                weekdaysMin: this.$i18n.messages[val]._weekdays_min_,
                weekdaysParseExact: true,
            });
        })

   },

   methods: {
       changeLocale(lang) {
          this.moment.locale(lang);
       }
   }
})

但是，在我的控制台中，如果我尝试

$vm0.moment.locale（）

，它将返回正确的区域设置

在我所有的组件中，我都在模板中使用它

{{day.format（'ddd'）}}

问题是，当我尝试更改moment的区域设置时，它不会在每个组件的模板中更改。是否有办法强制刷新所有模板。（我在root中尝试了

$vm.$forceUpdate（）

）

---

如何使即时反应？

全局更改moment.js上的区域设置不会更改现有即时实例上的区域设置。即使有，也不会触发更新，因为Vue没有跟踪这些更改

Two-way data binding by VueJS. It's not moment problem.

var parent = new Vue({
  data: {
    a: 1
  }
})
// $addChild() is an instance method that allows you to
// programatically create a child instance.
var child = parent.$addChild({
  inherit: true,
  data: {
    b: 2
  }
})
console.log(child.a) // -> 1
console.log(child.b) // -> 2
parent.a = 3
console.log(child.a) // -> 3

我建议使用一种不同的解决方案，使用一种方法在矩实例上本地设置语言环境

import Vue from 'vue';

Vue.mixin({
    methods: {
        formatDate (moment, format) {
            return moment
                .locale(this.$root.locale)
                .format(format);
        },
    },
});

export default new Vue({
    render: h => h(BaseApp),
    data: {
        locale: 'en'
    },
    methods: {
        changeLocale(locale) {
            this.locale = locale;
        }
    }
 });

内联模板代码同样可读。然而，在解决问题的同时，这也是一个更加灵活的解决方案，它不关心实例来自何处

<h1>{{ formatDate(day, 'ddd') }}</h1>

{{formattate（day，'ddd'）}

Well。。如何实现我正在努力的目标？你的代码块在这里解释了什么？要更改每个组件的模板，你应该更改父组件的数据。这不就是在我的根目录中

this.moment.locale（lang）

吗？不。它不会改变每个组件的模板。所以如果你不介意解释的话，如何使其反应？