Vue-i18n在Vuex中未定义

Question

我正在尝试使用Vue，Vuex和VueI18n实施语言环境更新。我以为我找到了一种方法来更新在存储对象中设置i18n值的语言环境，然后像这样（变异）使用它：

async function unzipAndSelect( zipFile ) {
   var flist = [];
   var zip = await JSZip.loadAsync(zipFile);
   // async-forEach loop inspired from jszip source
   for(filename in zip.files) {
      if (!zip.files.hasOwnProperty(filename)) {
         continue;
      }
      // Object key is the filename
      var match = filename.match( /REGEX.pdf$/ );
      if(match) {
         var blob = await zip.file( filename ).async("blob");
         var file = new File( [blob], filename, {type : 'application/pdf'} );
         flist.push(file);
      }
   }
   return flist;
}

但是令人惊讶的是它不起作用...它说这。$ i18n没有定义，但是它是。

[string.replace.8.3] 有什么想法吗？

    UPDATE_LANGUAGE: (state, newLanguage) => {
      state.language = newLanguage;
      this.$i18n.locale = state.language;
    }

Answer 1

将方法声明更改为：

UPDATE_LANGUAGE: function(state, newLanguage) {
    state.language = newLanguage;
    this.$i18n.locale = state.language;
}

这是原因：

您要在Vue组件中声明一个新方法。如果您使用function关键字声明方法，则this将引用该函数的所有者，在这种情况下，将指代Vue组件实例（这就是您想要的）。

另一方面，使用箭头功能this并没有不是指向该功能的所有者，但是this取自其上下文。您会收到一个错误消息this在那里不存在-如果这样做的话，可能就不是您的Vue组件。