VueX 스토어가 작동하지 않음

VueX 스토어가 작동하지 않음

최근에 리덕스에서 VueX로 전환했는데 초기 상태를 업데이트할 수 없는 것 같습니다.상태를 초기화하는 데이터를 반환하는 메인 App 컴포넌트의 created() 훅 백엔드에서 API를 호출합니다.네트워크 요구와 데이터를 함께 볼 수 있기 때문에 액션이 호출되고 있는 것은 알 수 있지만, 변환이 호출되지 않거나 내 변환이 제대로 작동하지 않는 것 같습니다.브라우저에서 디버깅을 시도했지만 중단점을 추가할 때 Chrome에서 데이터를 볼 수 없습니다.Vue devtools 확장이 설치되어 있지만 기본 상태 이외에는 볼 수 없습니다.

모듈을 사용하고 있으며 호출하는 액션은 최상위 레벨/루트 레벨 모듈에 연결되어 있다는 점에 유의하십시오.관련된 파일은 다음과 같습니다.

본점

/* eslint-disable no-underscore-dangle */
import Vue from 'vue';
import Vuex from 'vuex';
import nandus from './nandus';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    nandus,
  },
  strict: process.env.NODE_ENV !== 'production',
});

export default store;

난더스 모듈

import axios from 'axios';
import { FETCH_NANDU_DATA, ASYNC_FETCH_NANDU_DATA } from '@/constants/nandus';
import modal from './modal';
import pdf from './pdf';
import scores from './scores';
import sections from './sections';


export default {
  state: {
    wushuStyles: null,
    nanduFormTypes: null,
    movements: null,
    movementCodes: null,
    nandu: null,
    connections: null,
  },
  actions: {
    [ASYNC_FETCH_NANDU_DATA]: ({ commit }) => {
      function success(response) {
        commit(FETCH_NANDU_DATA, response.data);
      }

      function failure(error) {
        const message = error.response ? error.response.data.message : error.message;
        console.error(`XHR Failed for getNanduData: ${message}`);
      }

      return axios.get('/api/nandu')
        .then(success)
        .catch(failure);
    },
  },
  mutations: {
    [FETCH_NANDU_DATA]: (state, data) => ({ ...state, ...data }),
  },
  modules: {
    modal,
    pdf,
    scores,
    sections,
  },
};

App.vue

import { mapActions } from 'vuex';
import store from '@/store';
import { ASYNC_FETCH_NANDU_DATA } from '@/constants/nandus';

export default {
  name: 'app',
  computed: {
    ...mapActions([
      ASYNC_FETCH_NANDU_DATA,
    ]),
  },
  created() {
    store.dispatch(ASYNC_FETCH_NANDU_DATA);
  },
};

API에서 반환된 데이터 예

{
  wushuStyles: ['A', 'B'],
  nanduFormTypes: ['A', 'B'],
  movements: ['A', 'B'],
  movementCodes: ['A', 'B'],
  nandu: ['A', 'B'],
  connections: ['A', 'B'],
}

돌연변이의 경우:

  mutations: {
    [FETCH_NANDU_DATA]: (state, data) => ({ ...state, ...data }),
  },

새로운 오브젝트{ ...state, ...data }반품되고 있습니다만,state절대 변이되지 않습니다.

변환을 변경하여 변경하다state이 문제를 해결합니다.

  mutations: {
    [FETCH_NANDU_DATA]: (state, data) => {
      // mutate state
      state = { ...state, ...data }
    },
  },

---

덧붙여서, 할 때Vue.use(Vuex)인스턴스 속성 $store모든 Vue 인스턴스에 추가됩니다.즉, Vue 인스턴스 내에서 스토어에 액세스할 수 있습니다.this.$store.

예:

  created() {
    this.$store.dispatch(ASYNC_FETCH_NANDU_DATA);
  },

언급URL : https://stackoverflow.com/questions/50862176/initializing-vuex-store-not-working