Vuetify.js 플러그인에서 vuex 상태 사용

Vuetify.js 플러그인에서 vuex 상태 사용

Vuetify.js 플러그인 내의 vuex 상태를 호출하는 것이 매우 혼란스럽습니다.

제 프로젝트는 사용자가 선호하는 언어를 기반으로 웹사이트를 번역하는 것입니다.i18n에서는 번역 셋업을 완료했습니다.이 프로젝트는 두 부분으로 구성되어 있습니다.

1. JSON 파일을 기반으로 한 번역(이것만으로도 문제없이 작동합니다)
2. Vuetify에서 제공하는 번역을 기반으로 한 Vuetify 컴포넌트 번역.

두 번째 포인트는 내가 막히는 지점이다.Vuetify 매뉴얼에 따르면 Vuetify.js 플러그인 내에 필요한 언어 파일을 Import해야 합니다.이 모든 것이 완벽하게 작동한다.

하지만... 수동으로만 변경할 수 있습니다...

제가 원하는 것은 제 vuex 스토어 내의 언어 세트에 따라 올바른 Vuetify 언어를 설정하는 것입니다.며칠 동안 인터넷을 뒤져서 찾을 수 있는 건 다 해봤어요하지만 아무것도 효과가 없는 것 같아요.Vuetify.js 플러그인 내의 vuex 상태를 호출하는 방법을 알 수 없습니다.

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

import nl from 'vuetify/es5/locale/nl'
import fr from 'vuetify/es5/locale/fr'
import en from 'vuetify/es5/locale/en'

Vue.component('my-component', {
 methods: {
    changeLocale() {
        this.$vuetify.lang.current
    },
 },
})
export default new Vuetify({
 lang: {
    locales: { nl, en, fr },
    current: "nl",
},
})

그래서 의 상태는currentvuex 스토어의 상태를 기반으로 합니다.

여기가 나의 vuex 스토어입니다.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import i18n, { selectedLocale } from './i18n'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    locale: selectedLocale
  },
  mutations: {
    updateLocale(state, newLocale) {
      state.locale = newLocale
    }
  },
  actions: {
    changeLocale({ commit }, newLocale) {
      i18n.locale = newLocale
      commit('updateLocale', newLocale)
    }
  },
  plugins: [createPersistedState()]
})

누가 이 일에 대해 누구에게 말해야 할지 내게 직접 알려줄 수 있을까?

로케일을 변경하는 경우i18nVuetify에서도 변경해야 합니다.

export default new Vuex.Store({
  state: {
    locale: selectedLocale
  },
  mutations: {
    updateLocale(state, newLocale) {
      state.locale = newLocale
    }
  },
  actions: {
    changeLocale({ commit }, { newLocale, currentVueComponent }) {
      i18n.locale = newLocale
      currentVueComponent.$vuetify.lang.current = newLocale // <--- the important code
      commit('updateLocale', newLocale)
    }
  },
  plugins: [createPersistedState()]
})

언급URL : https://stackoverflow.com/questions/62711008/use-vuex-state-in-vuetify-js-plugin