如何在 Vuex 存储中使用 vue-i18n 中的 $t 来初始化静态字符串

Question

在我的 vuex 商店模块中，我有provinceData作为Vuetify下拉选择框的数据源提供。

provinceData:  [
            {value:"AB", text: "Alberta"},
            {value:"BC", text: "British Columbia"},
            ...
        ],

我可以import i18n from '../plugins/i18n'在控制台输出中确认i18n.t('province.BC')从资源文件返回正确的文本

i18n.t('province.BC') British Columbia
click onLanguageChange fr
i18n.t('province.BC') British Columbia (Fr)

但是我如何将这些翻译插入数据源呢？

provinceData:  [
            {value:"AB", text: ???i18n.t('province.AB')??? },
            {value:"BC", text: ???i18n.t('province.BC')??? },
            ...
        ]

现在我意识到我将 i18n.t('province.AB') 包装到反引号中犯了什么错误。这是更正后的版本，仅呈现英文消息：

provinceData:  [
            {value:"AB", text: i18n.t('province.AB') },
            {value:"BC", text: i18n.t('province.BC') },
            ...
        ]

另外，如果我切换当前语言环境，它会重新初始化吗？

附言。当该数据源的 getter 被点击时，我可以看到根据当前区域设置检索到该消息。但下拉框没有重新加载。那就是问题所在

以下 getter 每次调用时都会打印正确的翻译：

provinceData: (state) => {
            console.log("i18n.t('province.BC')",i18n.t('province.BC'));
            return state.provinceData;
        },

Answer 1

因为存储中的省数据除了变异器之外不能被任何东西修改。所以我决定在 getter 中创建这个数组，结果证明它非常快。

provinceData: ( state ) =>
        {
            const provinceData = [ "AB", "BC", "MB", "NB", "NF", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT" ];
            let provinces = [];

            provinceData.forEach( (province) => {
                provinces.push
                ({
                    value : province,
                    text  : i18n.t( 'province.'+province )
                })
            })

            return provinces;
        }