使用Vuex进行双向数据绑定
使用Vuex进行双向数据绑定
提问于 2017-07-05 03:46:32
在下面的代码中，我将一个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
}
}
})回答 2
Stack Overflow用户
回答已采纳
发布于 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)
}
}
}Stack Overflow用户
发布于 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);
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44913187
复制相关文章
相似问题
腾讯云开发者
