I am working on vuex app, on my other page i am committing changes to state its working, but here on this specific page i am getting some data from api and storing it in store but it get stuck in mutation, I am getting all data in mutation payload but its not effecting the changes, Please check the screenshot and code,
I can not create fiddle cuz it works there
Getting Items
async getItems () {
await this.$axios.get(`/api/projects/w/latest/all`)
.then(response => {
this.$store.commit('project/UPDATE_PROJECTS', response.data.items)
});
}
Action
updateProjectsAction (context, projects) {
context.commit('UPDATE_PROJECTS', projects)
},
Mutation
UPDATE_PROJECTS (state, payload ) {
state.projects = payload
}
State
projects: {},
When i click load state or manually commit these changes it gives me this error.
In getting items
this.$store.commit('project/UPDATE_PROJECTS', response.data.items)
you should change it to
this.$store.dispatch('project/updateProjectsAction', response.data.items)
In Action you should change
updateProjectsAction ({commit}, projects) {
commit('UPDATE_PROJECTS', projects)},
And last thing, you should have getters for getting data from vuex
getters:{
getProjects: state =>{
return state.project
}
}
In .vue
import 'mapGetters' from 'vuex'
export default {
computed:{
...mapGetters({
projects: project/getProjects
})
}
}
getters and computed will helps your vue app reactive
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.