작업을 사용할 때 Vuex가 상태를 업데이트하지 않음

작업을 사용할 때 Vuex가 상태를 업데이트하지 않음

VueX에 대해 이해하려고 노력하지만 Axios가 VueX를 사용하도록 설득하는 데 어려움을 겪고 있습니다.내 store.js 파일에는 다음이 있습니다.

 state: {
    cards: [],
    currentPage: 1,
    lastPage: 2,
  },
  actions: {
    loadGradients(pageNumber) {
      if (axios == null) {
        return;
      }
      axios
        .get("/api/gradients?page=" + pageNumber + "&sort=" + "created_at")
        .then((res) => {
          if (res.status === 200) {
            state.cards = res.data.gradients.data;
            state.lastPage = res.data.gradients.last_page;
            state.currentPage = res.data.gradients.current_page;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

메인 app.js 파일의 다음 함수를 통해 호출합니다.

  created() {
    this.loadGradients(1);
  },
  methods: {
    loadGradients: function (pageNumber) {
      this.$store.dispatch("loadGradients");
    },
  },

그러나 페이지를 실행하면 store.js 파일의 배열이 갱신되지 않는 것 같습니다.데이터베이스에서 데이터가 올바르게 반환되고 있는데도 말이죠.내가 뭘 잘못했는지 모르겠어?동작과 돌연변이를 조합해서 사용해야 한다면 어떻게 해야 할까요?

응답 데이터를 다음 중 하나에 할당해 보시겠습니까?store사용.mutations

mutations = {
  setCards:(state,data) => state.cards = data,
  setCurrentPage:(state,value) => state.currentPage = value,
  setLastPage:(state,value) => state.lastPage = value
}

그리고 내면의 행동

        loadGradients({commit},pageNumber) {
            if (axios == null) {
                return;
            }
            axios
                .get('/api/gradients?page=' + pageNumber +'&sort=' + 'created_at')
                .then(res => {
                    if (res.status === 200) {
                       // calling the mutations
                        commit('setCards',res.data.gradients.data);
                        commit('setCurrentPage',res.data.gradients.current_page);
                        commit('setLastPage',res.data.gradients.last_page);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

상태를 갱신하려면 상태 내에서 변환을 커밋해야 합니다.지금 이 순간적으로loadGradients행동, 당신은 알게 될 것이다.state는 실제로 VueX 상태를 나타내는 것은 아닙니다.정의되어 있지 않을 수 있습니다.콘솔 로그를 확인해 주세요.

해결책은 액션 자체에서 커밋하는 변이를 만드는 것입니다.우선, 액션을 디스패치 할 때,pageNumber의 두 번째 논의에서this.$store.dispatch방법:

loadGradients: function(pageNumber) {
    this.$store.dispatch('loadGradients', pageNumber) ;
}

그런 다음 액션으로 에 액세스합니다.pageNumber두 번째 인수로요.첫 번째 인수는 압축을 풀 수 있는 객체입니다.

actions: {
    loadGradients({ commit }, pageNumber) {
        if (axios == null) {
            return;
        }
        axios
            .get('/api/gradients?page=' + pageNumber +'&sort=' + 'created_at')
            .then(res => {
                if (res.status === 200) {
                    commit('updateState', {
                        cards: res.data.gradients.data,
                        lastPage: res.data.gradients.last_page,
                        currentPage: res.data.graduents.current_page,
                    });
                }
            })
            .catch(err => {
                console.log(err);
            });
    },
}

VueX 스토어 상태 설정을 처리할 변환을 만듭니다.

mutations: {
    updateState(state, { cards, lastPage, currentPage }) {
        state.cards = cards;
        state.lastPage = lastPage;
        state.currentPage = currentPage;
    }
},

---

권장되지 않는 경우에도 실제로 액션 내에서 VueX 스토어 상태를 업데이트할 수 있습니다.

actions: {
    loadGradients({ state }, pageNumber) {
        if (axios == null) {
            return;
        }
        axios
            .get('/api/gradients?page=' + pageNumber +'&sort=' + 'created_at')
            .then(res => {
                if (res.status === 200) {
                    state.cards = res.data.gradients.data;
                    state.lastPage = res.data.gradients.last_page;
                    state.currentPage = res.data.graduents.current_page;
                }
            })
            .catch(err => {
                console.log(err);
            });
    },
}

언급URL : https://stackoverflow.com/questions/61101513/vuex-not-updating-state-when-using-actions