英文:
Update vuex state after axios PUT response
问题
我正在尝试通过开发一个小型的游戏列表应用与一个小型的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>
我的Store如下：
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和action都工作得很好，但我似乎无法弄清如何在PUT响应后更改状态（gamelist），以便我可以更新视图并显示游戏的新完成状态，而无需刷新。 PUT响应只是一个“成功”消息，当数据库中的游戏已更新时。
在getGames操作中的GET响应如下所示：
[
{"completed":true,"_id":"5e0df1af63680526c07c670c","name":"Alien Isolation"},
{"completed":false,"_id":"5e0df75ea252fe27e58577f6","name":"Red Dead Redemption"}
]
英文:
I am trying to get a grip on Vuex by developing a small Games List app with a small NodeJS backend.
I have a Game List component with an option to update a game's completed status with a button
<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>
And my Store
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
};
The getter works perfectly and so does the action, but I can't seem to figure out how to mutate the state ( the gamelist ) after the PUT response so that I can update the view and display the game's new completed status without doing a refresh. The PUT response is just a "success" message, when the game in the database has been updated.
The GET response in the getGames action looks like this:
[{"completed":true,"_id":"5e0df1af63680526c07c670c","name":"Alien Isolation"},{"completed":false,"_id":"5e0df75ea252fe27e58577f6","name":"Red Dead Redemption"}]
答案1
得分: 2
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;
}
}
英文:
Change these as follows:
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;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论