Vuex在使用动作时不更新状态

Question

试图了解 VueX，但努力让 Axios 使用它。我的 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 文件中的数组似乎没有被更新，即使数据是从数据库中正确返回的。不知道我做错了什么？如果我必须使用动作和突变的组合，请问我该怎么做？

Answer 1

您可以尝试使用mutations 将响应数据分配给store

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);
                });
        },

Answer 2

如果你想更新状态，应该通过在你的状态中提交一个突变来完成。如果您查看您的 loadGradients 操作，您会意识到 state 实际上并不是指 VueX 状态。它可能未定义：检查您的控制台日志。

一种解决方案是创建一个您将在操作本身中提交的突变。首先，在调度操作时，您需要在this.$store.dispatch 方法的第二个参数中包含pageNumber：

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

然后，在您的操作中，访问pageNumber 作为第二个参数。第一个参数是context object that can be unpacked：

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);
            });
    },
}