在下面的代码中,我将一个textarea的输出双向绑定到一个p元素,一次是从组件的内部状态,一次是从Vuex。Vuex状态确实显示了初始值,但是该值不会随着我添加或删除文本而更新(就像它正确地处理绑定到内部数据的第一个文本区域一样)。导致此问题的差异是什么?
组件代码:
<template>
<div>
<div>
<textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="internal_state"></textarea>
<p> {{ internal_state }}</p>
<hr>
<textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="this.$store.state.vuex_state"></textarea>
<p> {{ this.$store.state.vuex_state }}</p>
<hr>
</div>
</div>
</template>
<script>
export default {
name: 'WriteArea',
data () {
return {
internal_state: ''
}
},
methods: {
}
}
</script>
Vuex代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
strict: true,
state: {
counter: 0,
vuex_state: 'starting string'
},
getters: {
vuex_getter1: (state) => {
return state.vuex_string
}
}
})
发布于 2017-07-05 03:52:50
Vuex状态应该通过变异来更新。有关此问题的确切信息,请参阅文档。解决方案不是使用v- :value
,而是绑定到textarea
的模型,然后有一个自定义事件来改变输入上的Vuex状态:https://vuex.vuejs.org/en/forms.html
<input :value="message" @input="updateMessage">
// ...
computed: {
...mapState({
message: state => state.obj.message
})
},
methods: {
updateMessage (e) {
this.$store.commit('updateMessage', e.target.value)
}
}
另一种选择是在同一计算属性中创建setter和getter:
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
发布于 2018-06-09 08:12:22
您可以尝试使用mine库来解决双向绑定vuex问题。
https://github.com/yarsky-tgz/vuex-dot
示例:
<template>
<input v-model="name"/>
<input v-model="email"/>
<button @click.stop="step++">next</button>
</template>
<script>
import { takeState } from 'vuex-dot';
export default {
computed: {
step: takeState('wizard.step')
.commit('setWizardStep')
.map(),
...takeState('user')
.expose(['name', 'email'])
.commit('editUser')
.map()
}
}
</script>
store/index.js
export default new Vuex.Store({
state: {
wizard: {
step: 1
},
user: {
name: 'John',
email: 'john@doe.com'
}
},
mutations: {
setWizardStep(state, step) {
state.wizard.step = step;
},
editUser(state, patch) {
state.user = Object.assign({}, state.user, patch);
}
}
});
https://stackoverflow.com/questions/44913187
复制相似问题