javascript - 使用 vuex 更新数据
问题描述
作为 Vuex,我正在尝试使用表单更新对象。我的代码是这样的。
有存货:
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 文件中的模板:
<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
在控制台中打印了对象。它完全符合我的预期。但点击更新按钮后。它没有改变。
任何人都可以告诉我为什么并给我解决方案?谢谢。
解决方案
您可以将参数包装在 1 个payload
对象中:
在您的组件中
this.$store.dispatch('updateCategory', {
id: this.$route.params.id,
data: this.category
});
在您的商店中,您需要在编辑categories
数组时创建新对象(您可以阅读有关不可变的更多信息)
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'});
})
}
推荐阅读
- python - 由 FreqDist 和 ngrams 创建的键中的 remove ()
- c++ - 在 C++ 中使用节点获得一个奇怪的值
- python - ValueError:两个形状中的维度 1 必须相等,但为 299 和 3。形状为 [?,299,299,3] 和 [1,3,299,299]
- python - 解析一个用引号括起来的字符串,其中包含单词“...”并打印字符串 Python Regex
- python-3.x - 使用最后 n 个值的平均值或中值填充数据框不同列中的缺失值
- webpack - 有没有办法将自定义文件添加到我的 VueJS 构建输出中
- electron - 将自定义行为添加到具有角色的电子菜单项
- moodle - 如何从moodle config.php 文件中选择主题并更改主题配置?
- sql - Sql 查询添加连续的行值,直到满足条件
- c++ - 如何设置超时以在运行一段时间后停止功能?