javascript - axios PUT 响应后更新 vuex 状态

Question

我正在尝试通过开发一个带有小型 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
};

setter/getter 工作完美， Action 也完美，但我似乎无法弄清楚如何在 PUT 响应后改变状态(游戏列表)，以便我可以更新 View 并显示游戏的新完成状态，而无需进行刷新。当数据库中的游戏已更新时，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;
  }
}