axios PUT 响应后更新 vuex 状态答案

【问题标题】：Update vuex state after axios PUT responseaxios PUT 响应后更新 vuex 状态
【发布时间】：2020-04-21 19:30:59
【问题描述】：

我正在尝试通过开发一个带有小型 NodeJS 后端的小型游戏列表应用程序来掌握 Vuex。

我有一个游戏列表组件，其中包含一个使用按钮更新游戏完成状态的选项

<template>
  <div id="gameList">
    <div v-for="game in allGames" :key="game._id" class="game">
      <strong>{{ game.name }}</strong>
      <em class="completed">{{ game.completed }}</em>
      <button @click="updateCompleted(game._id)" v-if="game.completed === false">Set completed</button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "GameList",
  methods: {
    ...mapActions(["getGames", "updateCompleted"])
  },
  computed: mapGetters(["allGames"]),
  created() {
    this.getGames();
  }
};
</script>

还有我的商店

const state = {
  gamelist: []
};

const getters = {
  allGames: state => state.gamelist
};

const actions = {
  getGames: async context => {
    const response = await axios.get("http://localhost:8081/allgames");
    context.commit("setGames", response.data);
  },

  updateCompleted: async (context, payload) => {

    const response = await axios.put(
      `http://localhost:8081/update/${payload}`, {
        completed: true
      }
    );

    context.commit('updateCompleted', response)
  }
};

const mutations = {
  setGames: (state, payload) => (state.gamelist = payload),

  updateCompleted: state => console.log(state)
};

export default {
  state,
  getters,
  actions,
  mutations
};

getter 可以完美运行，动作也可以，但我似乎无法弄清楚如何在 PUT 响应之后改变状态（游戏列表），以便我可以更新视图并显示游戏的新完成状态，而无需做刷新。当数据库中的游戏已更新时，PUT 响应只是一个“成功”消息。

getGames 操作中的 GET 响应如下所示：

[{"completed":true,"_id":"5e0df1af63680526c07c670c","name":"Alien Isolation"},{"completed":false,"_id":"5e0df75ea252fe27e58577f6","name":"Red Dead Redemption"}]

【问题讨论】：

标签： javascript node.js vue.js vuex

【解决方案1】：

如下更改：

context.commit('updateCompleted', {response, payload});

updateCompleted: (state, data) => {
  if(data.response.status === 200){
    let game = state.gamelist.findIndex(game => game._id === data.payload);
    state.gamelist[game].completed = true;
  }
}

【讨论】：

或者，如果您的 allgames 查询很简单，您可以在提交后添加 context.dispatch('getGames') 以重新获取整个数据集。
不错！这完美！重新获取数据的调度函数会放在哪里？
在 updateCompleted 操作中，在 axios 调用之后。