// inside mutations
mutations: {
updateMessage (state, message) {
state.obj.message = message
}
}
// html
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
我编码
<input type="text" v-model="data.reference">
data () {
return {
data:{
...
reference: '',
}
}
},
computed: {
'data.reference':{
get () {
return this.$store.state.currentKbdata.reference
},
set (value) {
console.log(222)
this.$store.commit('updateReference', value)
}
}
}
当我输入输入时,222没有显示
............................................... ..........................
答案 0 :(得分:0)
您无法像点击手一样使用点表示法定义计算的getter。这里的fiddle不起作用,您可以在控制台中看到错误:
无法读取属性&#39;引用&#39;未定义的。
此外,您似乎正在尝试定义已作为data
方法中定义的属性存在的计算属性。在这个fiddle中,您可以看到它也不会起作用。 data
方法中定义的值优先于计算属性定义。
无论如何,从你的例子中,我不知道为什么你需要在嵌套对象属性上创建一个计算属性。
只需对计算属性使用普通定义:
const store = new Vuex.Store({
state: {
reference: '',
},
mutations: {
updateReference(state, reference) {
state.reference = reference;
}
}
});
new Vue({
el: '#app',
store,
computed: {
reference: {
get() {
return this.$store.state.reference;
},
set(val) {
this.$store.commit('updateReference', val);
}
}
}
})
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>
<div id="app">
<input type="text" v-model="reference">
{{ $store.state.reference }}
</div>
&#13;
如果您确实需要设置data.reference
的值,那么有很多方法可以实现这一点。一种方法是将其转换为计算属性:
const store = new Vuex.Store({
state: {
reference: '',
},
mutations: {
updateReference(state, reference) {
state.reference = reference;
}
}
});
new Vue({
el: '#app',
store,
computed: {
reference: {
get() {
return this.$store.state.reference;
},
set(val) {
this.$store.commit('updateReference', val);
}
},
data() {
return { reference: this.reference };
}
}
})
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>
<div id="app">
<input type="text" v-model="reference">
<div>data.reference: {{ data.reference }}</div>
<div>$store.state.reference: {{ $store.state.reference }}</div>
</div>
&#13;