programing

전자에 관한 Vuex 액션 디스패치 문제

projobs 2022. 10. 31. 23:19
반응형

전자에 관한 Vuex 액션 디스패치 문제

vuex를 사용하는 전자 앱이 있습니다.Store는 모듈이 있는 전체 앱, 테스트 모듈 Browser에 대해 구성되었습니다.js:

export default {
  namespaced: true,
  state: {
    currentPath: 'notSet'
  },
  mutations: {
    setPath (state) {
      state.currentPath = 'xxxx'
    }
  },
  actions: {
    updateCurrentPath ({ commit }) {
      console.log('COMMIT')
      commit('setPath')
    }
  },
  getters: {
    getCurrentPath (state) {
      return state.currentPath
    }
  }
}

이제 컴포넌트 내부에서 업데이트 액션을 디스패치하려고 했지만 성공하지 못했습니다.Getters는 정상적으로 동작합니다.

mounted () {
  console.log('mounted')
  console.log('# GET FROM STORE:', this.$store.getters['Browser/getCurrentPath'])
  console.log('# DISPATCH:', this.$store.dispatch('Browser/updateCurrentPath'))
  console.log('# GET FROM STORE 2:', this.$store.getters['Browser/getCurrentPath'])
},

콘솔:

mounted
Browser.vue?31a5:62 # GET FROM STORE: notSet
Browser.vue?31a5:63 # DISPATCH: undefined
Browser.vue?31a5:64 # GET FROM STORE 2: notSet

이 로그를 기록할 때 액션이 존재합니다.$store 변수 표시:

Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}
_actions:
Browser/updateCurrentPath

그럼 액션을 어떻게 디스패치해야 하나요?

전자 플러그인에 문제가 있었다.저는 github의 electron-vue repo를 사용하고 있으며 사용되는 플러그인이 있습니다.

export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(),
    createSharedMutations()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

createSharedMutations 플러그인이 문제였습니다.이 코멘트를 하면 모든 것이 정상적으로 동작합니다.

export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

vuex-electron 플러그인과 함께 vue-electron 템플릿을 사용하는 경우 src/main/index.js 파일에 다음 행을 추가해야 합니다.

import store from '../renderer/store'

createSharedMutations() 플러그인을 활성화한 경우 메인 프로세스에서 스토어 인스턴스를 생성해야 합니다.이를 수행하려면 다음 행을 메인 프로세스에 추가합니다(예: src/main.js).

import './path/to/your/store'이 문제의 원인이 되고 있는 전자 뷰에 의해 사용되는 공식 플러그에 대한 링크

언급URL : https://stackoverflow.com/questions/53748070/vuex-action-dispatch-problem-with-electron

반응형