Axios PUT响应后更新vuex状态

Question

[我正在尝试通过开发带有小型NodeJS后端的小型Games List应用来掌握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
};

吸气剂工作正常，动作也一样，但是我似乎无法弄清楚如何在PUT响应后改变状态（游戏列表），这样我就可以不进行任何操作而更新视图并显示游戏的新完成状态刷新。当数据库中的游戏已更新时，PUT响应只是“成功”消息。

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

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

Answer 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;
  }
}