使用 vuex 更新数据
[英] Update data using vuex
本文介绍了使用 vuex 更新数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
作为 Vuex，我正在尝试使用表单更新对象.我的代码是这样的.
店内:
const state = {类别:[]};//突变:[mutationType.UPDATE_CATEGORY](状态，ID，类别){const record = state.categories.find(element => element.id === id);state.categories[记录] = 类别；}//动作:更新类别({提交}，ID，类别){categoryApi.updateCategory(id, category).then((response) => {提交(mutationType.UPDATE_CATEGORY，id，响应)；router.push({name: 'categories'});})}
.Vue 文件中的模板:
<div class="form-group"><label for="Slug">Slug</label><输入类型=文本"class="form-control form-control-sm"名称=蛞蝓"v-model.lazy="category.slug" required>
<div class="form-group"><label for="Avatar">Avatar</label><输入类型=文本"class="form-control form-control-sm"名称=头像"v-model.lazy="category.avatar" required>
<div class="form-group"><label for="Description">Description</label><文本区域类型=文本"class="form-control form-control-sm"行=5"名称=说明"v-model.lazy="category.description"></textarea>
<div class="form-group"><button type="submit" @click.prevent="updateCategory" class="btn btn-outline btn-sm">更新</button>
</表单>
在脚本中:
出口默认{数据() {返回 {类别: {}}},方法: {getCategoryById(id) {axios.get(`categories/${id}`).then(响应 => {this.category = response.data;}).catch(错误=> {控制台日志(错误)；})},//使用变异.更新类别(){this.$store.dispatch('updateCategory', this.$route.params.id, this.category);控制台.log(this.category);//准确显示更改的数据.}},创建(){this.getCategoryById(this.$route.params.id);}}
我的问题是当我单击更新时.没什么变化.我确实在控制台中打印了 category 对象.它完全符合我的预期.但是点击更新按钮后.它没有改变.
谁能告诉我为什么并给我解决方案?谢谢.
解决方案
您可以将参数包装在 1 个 payload 对象中:
在你的组件中
this.$store.dispatch('updateCategory', {id: this.$route.params.id,数据:this.category});
在您的商店中，您需要在编辑 categories 数组时创建新对象(您可以阅读有关不可变的更多信息)
const state = {类别:[]};//突变:[mutationType.UPDATE_CATEGORY](状态，有效载荷){state.categories = state.categories.map(category => {if (category.id === payload.id) {返回 Object.assign({}, category, payload.data)}退货类别})}//动作:更新类别({提交}，有效载荷){categoryApi.updateCategory(payload.id, payload.data).then((response) => {提交(mutationType.UPDATE_CATEGORY，有效载荷)；router.push({name: 'categories'});})}
As Vuex, I'm trying to update an object using form.
My code like this.
In store:
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'});
})
}
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>
And in script:
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);
}
}
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.
解决方案
You can wrap your parameters in 1 payload object:
In your component
this.$store.dispatch('updateCategory', {
id: this.$route.params.id,
data: this.category
});
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屋！
