Vuex-Persistedstate 在重新加载时运行突变

Question

我正在使用 Nuxt 2、Vue 2、Vuex 3、Vuetify 2、vuex-persistedstate 4 和 nuxt-i18n 6。

我设置此插件来保留包含RTL 状态和语言代码的 Vuex 状态：

plugins/persistedState.client.js：

import createPersistedState from 'vuex-persistedstate'
export default ({ store, req, vuetify, $vuetify }) => {
  createPersistedState({
    paths: [
      'app.isRTL',
      'app.langCode'
    ]
  })(store)
}

另外，我编写了一些突变来保存状态中的设置并将主题应用于 vuetify：

store/app/index.js：

export default {
  namespaced: true,
  state: {
    isRTL: false,
    langCode: 'en'
  },
  mutations: {
    setRTL: function (state, isRTL) {
      this.app.vuetify.framework.rtl = isRTL
      state.isRTL = isRTL
  },
    setLangCode: function (state, langCode) {
      this.app.vuetify.framework.lang.current  = langCode
      state.langCode = langCode
  },
  }
}

• 通过调用setLangCode突变，语言将被设置为给定语言并将其保存在状态中
• 通过调用setRTLvuetify 的 rtl 方向将正确设置并将其保存在 sate 中

问题是，在页面重新加载时，vuex-persistedstate 将从本地存储恢复 vuex 状态，但设置 vuetify 设置的突变不会被调用，因此 vuetify 将保持在磨损方向。

此外，nuxt-i18n 将从 url而非状态中检测语言代码，并据此翻译页面。