使用vuex更新数据 [英] Update data using vuex
问题描述
作为Vuex,我正在尝试使用表单更新对象.我的代码是这样的.
As Vuex, I'm trying to update an object using form. My code like this.
在商店中:
const state = {
categories: []
};
//mutations:
[mutationType.UPDATE_CATEGORY] (state, id, category) {
const record = state.categories.find(element => element.id === id);
state.categories[record] = category;
}
//actions:
updateCategory({commit}, id, category) {
categoriesApi.updateCategory(id, category).then((response) => {
commit(mutationType.UPDATE_CATEGORY, id, response);
router.push({name: 'categories'});
})
}
.Vue文件中的模板:
Template in .Vue file:
<form>
<div class="form-group">
<label for="Name">Name</label>
<input
type="text"
class="form-control form-control-sm"
name="name"
v-model.lazy="category.name" required>
</div>
<div class="form-group">
<label for="Slug">Slug</label>
<input
type="text"
class="form-control form-control-sm"
name="slug"
v-model.lazy="category.slug" required>
</div>
<div class="form-group">
<label for="Avatar">Avatar</label>
<input
type="text"
class="form-control form-control-sm"
name="avatar"
v-model.lazy="category.avatar" required>
</div>
<div class="form-group">
<label for="Description">Description</label>
<textarea
type="text"
class="form-control form-control-sm"
rows="5"
name="description"
v-model.lazy="category.description"></textarea>
</div>
<div class="form-group">
<button type="submit" @click.prevent="updateCategory" class="btn btn-outline btn-sm">Update</button>
</div>
</form>
在脚本中:
export default {
data() {
return {
category: {}
}
},
methods: {
getCategoryById(id) {
axios.get(`categories/${id}`)
.then(response => {
this.category = response.data;
})
.catch(error => {
console.log(error);
})
},
// Using mutation.
updateCategory() {
this.$store.dispatch('updateCategory', this.$route.params.id, this.category);
console.log(this.category); //Display exactly data changed.
}
},
created() {
this.getCategoryById(this.$route.params.id);
}
}
我的问题是当我单击更新"时.一切都没有改变.我确实在控制台中打印了 category
对象.它显示的正是我的期望.但是点击更新按钮后.它没有改变.
My problem is when I click Update. It nothing change.
I did print category
Object in console. It displays exactly what I expected.
But after click Update button. It hasn't changed.
任何人都可以告诉我原因并给我解决方案吗?谢谢.
Anyone can tell me why and give me solution?? Thanks.
推荐答案
您可以将参数包装在1个 payload
对象中:
You can wrap your parameters in 1 payload
object:
在您的组件中
this.$store.dispatch('updateCategory', {
id: this.$route.params.id,
data: this.category
});
在商店中,编辑 categories
数组时需要制作新对象(您可以阅读有关不可变的更多信息)
in your store, you need to made new object when edit categories
array (you can read more about immutable)
const state = {
categories: []
};
//mutations:
[mutationType.UPDATE_CATEGORY] (state, payload) {
state.categories = state.categories.map(category => {
if (category.id === payload.id) {
return Object.assign({}, category, payload.data)
}
return category
})
}
//actions:
updateCategory({commit}, payload) {
categoriesApi.updateCategory(payload.id, payload.data).then((response) => {
commit(mutationType.UPDATE_CATEGORY, payload);
router.push({name: 'categories'});
})
}
这篇关于使用vuex更新数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!