programing

vuex 모듈 appState가 첫 번째 인수로 전달된 모듈 네임스페이스에서 작동하지 않음

prostudy 2022. 5. 18. 21:55
반응형

vuex 모듈 appState가 첫 번째 인수로 전달된 모듈 네임스페이스에서 작동하지 않음

워드프로세서에서 제안한 대로 네임스페이스를 첫 번째 인수로 전달하려고 하면 값('모듈 정의에 테스트'가 설정됨)으로 "정의되지 않음"이 표시됨

...mapState('guest', {
    email: state => state.email,
}),

네임스페이스 없이 이런 식으로 하면 괜찮지만 첫 번째 인수는

...mapState({
    email: state => state.guest.email,
}),

바로 가기를 사용하고 싶은데, 설명서에 따르면, 첫 번째 예는...그렇죠?

https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace

내 모듈 정의는 다음과 같다.

const initialState = function(){
    let state = {
        email: null,
    };

    return state;
};    

export default {
    namespaced: true,
    state: initialState(),
    mutations: {
        fill(state, data) {
            Object.assign(state, data);
        },
        reset(state) {
            Object.assign(state, initialState());
        }
    },
    actions: {
    }
};

당신의computed...mapState구문이 올바르므로, 문제는 채우기 변이가 호출되는 방식에 있을 가능성이 높다.커밋에 이름을 붙이는 거야?

이것은 실제의 예다.

바꿀 수 있는 유일한 것은state: initialState그래야 한다state: Object.assign({}, initialState).

첫 번째 방법은 에 대한 참조로 상태를 설정한다.initialState객체, 따라서 채우기 돌연변이의 모든 변경은 다음 값을 덮어쓰게 된다.initialState그리고 리셋된 돌연변이는 아무 효과도 없을 것이다.

구성 요소

export default {
  ...
  computed: {
    ...mapState("guest", {
      email: state => state.email
    })
  },
  mounted() {

    // Call the fill mutation with namespace
    this.$store.commit("guest/fill", {
      email: "some@email"
    });

    // Call reset after 2 seconds 
    setTimeout(() => {
      this.$store.commit("guest/reset");
    }, 2000);
  }

저장하다

const initialState = {
  name: "dummyName",
  email: "dummy@initial" // put a value here so we can see if mapState works
};

const store = new Vuex.Store({
  modules: {
    guest: {
      namespaced: true,
      state: Object.assign({}, initialState),
      mutations: {
        fill(state, data) {
          Object.assign(state, data);
        },
        reset(state) {
          Object.assign(state, initialState);
        }
      }
    }
  }
});

참조URL: https://stackoverflow.com/questions/56926526/vuex-module-appstate-not-working-with-module-namespace-passed-as-first-argument

반응형