미리 정의된 개체 대신 페이지 새로 고침 후 Vuex 상태가 null로 변환됩니다.

미리 정의된 개체 대신 페이지 새로 고침 후 Vuex 상태가 null로 변환됩니다.

간단한 어플리케이션에서는 컴포넌트 작성 후크에 연결된 간단한 돌연변이 및 액션 세트를 만듭니다.브라우저에서 F5 키를 누른 후 Vuex 탭에서 vue-devtools가 열리면 응용 프로그램 시작 시 오류가 표시되지만, 이 오류가 발생하면 안 됩니다.

주요 질문: 상태가 'null'인 이유와 상태를 변경하는 방법

store.displaces를 설정합니다.

export default new Vuex.Store({
  state: {
    a: undefined,
    b: undefined
  },
  mutations: {
    SET_A (state, a) {
      console.info(a)
      state.a = a // ← store.js?c0d6:14
    },
    SET_B (state, b) {
      state.b = b
    }
  },
  actions: {
    setA ({ commit }, a) {
      console.info(a)
      commit('SET_A', a)
    },
    setB ({ commit }, b) {
      commit('SET_B', b)
    }
  }
})

Home.vue

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  created: function () {
    this.$store.dispatch('setA', 'A')
  }
}
</script>

정보.vue

<script>
export default {
  name: 'home',
  components: {
  },
  created: function () {
    this.$store.dispatch('setB', 'B')
  }
}
</script>

콘솔 로그온 구성 요소 탭

log.js?1afd:24 [HMR] Waiting for update signal from WDS...
store.js?c0d6:22 A
store.js?c0d6:13 A
backend.js:1585  vue-devtools  Detected Vue v2.6.10 

Vuex 탭의 콘솔 로그

log.js?1afd:24 [HMR] Waiting for update signal from WDS...
store.js?c0d6:22 A
store.js?c0d6:13 A
backend.js:1585  vue-devtools  Detected Vue v2.6.10 

store.js?c0d6:13 null

backend.js:14674 Uncaught TypeError: Cannot set property 'a' of null
    at Store.SET_A (store.js?c0d6:14)
    at wrappedMutationHandler (vuex.esm.js?2ba1:725)
    at backend.js:14664
    at Array.forEach (<anonymous>)
    at VuexBackend.replayMutations (backend.js:14664)
    at VuexBackend.onInspectState (backend.js:14355)
    at Bridge.emit (backend.js:5472)
    at Bridge._emit (backend.js:5172)
    at backend.js:5097
    at Array.forEach (<anonymous>)
SET_A @ store.js?c0d6:14
wrappedMutationHandler @ vuex.esm.js?2ba1:725
(anonymous) @ backend.js:14664
replayMutations @ backend.js:14664
onInspectState @ backend.js:14355
emit @ backend.js:5472
_emit @ backend.js:5172
(anonymous) @ backend.js:5097
(anonymous) @ backend.js:5097
listener @ backend.js:2568
postMessage (async)
o @ proxy.js:1

store.js?c0d6:13 null

backend.js:14674 Uncaught TypeError: Cannot set property 'a' of null
    at Store.SET_A (store.js?c0d6:14)
    at wrappedMutationHandler (vuex.esm.js?2ba1:725)
    at backend.js:14664
    at Array.forEach (<anonymous>)
    at VuexBackend.replayMutations (backend.js:14664)
    at VuexBackend.onInspectState (backend.js:14355)
    at Bridge.emit (backend.js:5472)
    at Bridge._emit (backend.js:5172)
    at backend.js:5097
    at Array.forEach (<anonymous>)
SET_A @ store.js?c0d6:14
wrappedMutationHandler @ vuex.esm.js?2ba1:725
(anonymous) @ backend.js:14664
replayMutations @ backend.js:14664
onInspectState @ backend.js:14355
emit @ backend.js:5472
_emit @ backend.js:5172
(anonymous) @ backend.js:5097
(anonymous) @ backend.js:5097
listener @ backend.js:2568
postMessage (async)
o @ proxy.js:1

devtools 설정에서 "New Vuex 백엔드"였습니다.

무엇이 문제인지 모르겠지만 이 옵션을 비활성화하면 문제가 해결됩니다.

언급URL : https://stackoverflow.com/questions/56292088/vuex-state-is-null-in-mutation-after-page-refresh-instead-predefined-object