我一直在绕着这个头,我还不太想办法去做。
如何将输入数据绑定到商店对象属性? 含义:我的组件仅知道存储对象,但不预先知道对象包含哪些属性。
以这个例子为例:
Vue.component('os-choice', {
template: `
<div>
<h5>Select OS</h5>
<div>
<label class="checkbox">
<input type="checkbox" value="linux" v-model="linux">
Linux
</label>
</div>
<div>
<label class="checkbox">
<input type="checkbox" value="macos" v-model="macos">
MacOS
</label>
</div>
<div>
<label class="checkbox">
<input type="checkbox" value="windows" v-model="windows">
Windows
</label>
</div>
</div>
`,
computed: {
linux: {
get() {
return store.state.linux;
},
set(val) {
store.commit('updateLinux', {
linux: val
});
}
},
macos: {
get() {
return store.state.macos;
},
set(val) {
store.commit('updateMacos', {
macos: val
});
}
},
windows: {
get() {
return store.state.windows;
},
set(val) {
store.commit('updateWindows', {
windows: val
});
}
},
}
});
Vue.component('os-choice2', {
template: `
<div>
<h5>Select OS</h5>
<div v-for="(value,index) in os" :key="index">
<label class="checkbox">
<input type="checkbox" value="index" v-model="value">
{{index}}
</label>
</div>
</div>
</div>
`,
computed: {
os: {
get(){ return store.state.os; },
set(event){
var name = event.target.value;
var value = event.target.checked;
store.commit('updateOs', {name: name, value: value});
}
},
}
});
const store = new Vuex.Store({
state: {
// initial state
linux: true,
macos: true,
windows: false,
os: {
linux: true,
macos: true,
windows: false,
}
},
mutations: {
updateLinux(state, payload) {
console.log('STORE: updated linux');
state.linux = payload.linux;
},
updateMacos(state, payload) {
console.log('STORE: updated MacOS');
state.macos = payload.macos;
},
updateWindows(state, payload) {
console.log('STORE: updated Windows');
state.windows = payload.windows;
},
updateOs(state, payload) {
console.log('STORE: updated OS');
state.os[payload.name] = payload.value;
}
}
});
var app = new Vue({
el: "#app",
})
.row{
width: 100%;
}
.column{
width: 50%;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
<div id="app" style="text-align:center;">
<div class="row">
<div class="column">
<os-choice></os-choice>
</div>
<div class="column">
<os-choice2></os-choice2>
<div>
</div>
</div>
第一个组件效果很好。 第二个组件不会更新存储:它会生成错误“ [vuex]不要在变异处理程序之外变异vuex商店状态。”
我相信我理解为什么会发生这种情况:由于组件的计算属性指向对象(而不是要更改的属性),因此v模型将尝试更改deep属性,从而迫使商店进行更改这样会在组件甚至调用对象的set()方法之前抛出错误,对吧?
所以我想知道的是解决这个问题的正确方法?
我的现实情况是,我正在使用复选框构建一个动态过滤器,而在运行时我不知道它将有多少个选项。这意味着我将遍历所有选项来创建复选框,但是数据绑定必须采用“ values []”的形式。这就是我开始头痛的地方。
谢谢大家
答案 0 :(得分:1)
从VueJs文档中:
自定义事件还可以用于创建与 v模型。请记住:
<input v-model="searchText">
与以下内容相同:
<input v-bind:value="searchText" v-on:input="searchText =
$event.target.value"
>
在组件上使用时,v-model会这样做:
<custom-input v-bind:value="searchText" v-on:input="searchText =
$event"
></custom-input>
因此,您可以使用v-model
作为value
而不是使用v-bind:value="value"
并映射事件以适当地更新存储,例如:v-on:input="store.commit('store.commit('updateOs', event.target.value)"
由于您完全按照Vuex的建议进行操作,因此其他组件也可以工作:https://vuex.vuejs.org/guide/forms.html
但是在v-for
上,您正在直接使用商店模型。