问题描述
<!-- Search.vue -->
<template>
<form>
<input type="text" v-model="form.firstName">
<input type="text" v-model="form.lastName">
</form>
</template>
<script>
export default {
data() {
return {
form: {
firstName: '',lastName: '',}
}
}
</script>
我想将表单数据对象移动到我的 Vuex 存储,以便在用户离开该组件时保存表单设置。
理想情况下,我想做这样的事情,但即使这样有效,我还是会出错:
<template>
<form>
<input type="text" v-model="form.firstName">
<input type="text" v-model="form.lastName">
</form>
</template>
<script>
export default {
computed: {
form() {
get() {
return this.$store.state.form;
},set(values) {
this.$store.commit('SET_FORM',values)
}
},}
}
</script>
// store.js
export default {
state: {
form: {
firstName: '',}
},mutations: {
SET_FORM(state,values) {
state.form = values;
},},}
Error: [vuex] do not mutate vuex store state outside mutation handlers.
这是我的替代方法,但我觉得这太复杂了。
<template>
<form>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
</form>
</template>
<script>
export default {
computed: {
firstName() {
get() {
return this.$store.state.form.firstName;
},set(value) {
this.$store.commit('SET_FORM',{ attribute: 'firstName',value: value })
}
},lastName() {
get() {
return this.$store.state.form.lastName;
},{ attribute: 'lastName',{ attribute,value }) {
state.form[attribute] = value;
},}
有谁知道为什么我会收到 Vuex 错误以及如何修复它们?或者知道更好的方法来解决这个问题?
谢谢!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)