如何在组件的 属性 中反应性地设置 vue-i18n

Question

我正在尝试根据异步函数结果显示一些消息或错误。 当响应的请求不包含消息 属性 时，我应该使用我自己的。 问题是，当我在 someMethod 方法中使用 this.$t("message") 时，response.message（数据）不是反应性的。所以locale改变后不会改变。

<v-alert v-if="response.error || response.message"
  :type="response.error ? 'error' : 'info'">
  {{response.error ? response.error : response.message}}
</v-alert>

export default {
    data() {
      return {
        response: {
          message: "",
          error: ""
        }
      };
    },
    methods: {
      async someMethod() {
        const apiResponse = await sendRequestToAnApi();
        if (apiResponse.message) {
          this.response.message = apiResponse.message;
        } else {
          this.response.message = this.$t("translation")
        }
      }
    }
}

我想我应该使用计算 属性 来让它工作，但我不知道如何将响应对象与可能的 API 响应混合。

任何帮助将不胜感激

Answer 1

您的 API return 不仅可以是消息，还可以是代码，其中消息可以是基于用户区域设置的文本字符串，而代码是一个永远不会丢失的 slug是英语，例如 users.added 或 project.created。您可以将此代码存储在 response.code 中并创建计算 属性 检查此代码并 return 进行正确的 vue-i18n 翻译。

export default {
    data() {
      return {
        response: {
          code: "",
          error: ""
        }
      };
    },
    methods: {
      async someMethod() {
        const apiResponse = await sendRequestToAnApi();
        if (apiResponse.code) {
          this.response.code = apiResponse.code;
        } else {
          this.response.code = null
        }
      }
    },
    computed: {
        translatedMessage () {
            if (this.response.code === 'users.added') {
              return this.$t('translate')
            }
            return 'unknown code'
        }
    }
}

当然，您也可以使用来自 API 的文本字符串来完成这项工作，但我个人喜欢使用独立于语言设置的特定代码。