4

我正在使用 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 方向将正确设置并将其保存在状态

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

此外，nuxt-i18n 将检测来自 url而不是来自状态的语言代码，并以此为基础翻译页面。

4

0 回答 0