v-model的Vuex输入无反应性
v-model的Vuex输入无反应性
提问于 2017-03-13 09:25:01
我尽量简单地解释它。我有这样的东西。简单的Vue root，Vuex存储，并在导航栏id中输入v-model。
输入不是反应性的.为什么？!
HTML
<div id="navbar">
<h2>@{{ test }}</h2>
<input v-model="test" />
</div>store.js
import Vuex from 'vuex'
export const store = new Vuex.Store({
state: {
test: 'test'
},
getters: {
test (state) {
return state.test
}
}
})Vue根
import { store } from './app-store.js'
new Vue({
el: '#navbar',
store,
computed: {
test () {
return this.$store.getters.test
}
}
})回答 3
Stack Overflow用户
发布于 2017-03-13 10:19:53
您不会想要使用v-model来实现这一点。取而代之的是，在输入字段和methods挂钩中使用@input="test"：
test(e){
this.$store.dispatch('setTest', e.target.value)
}在你的Vuex商店里：
在mutations中：
setTest(state, payload){
state.test = payload
},在actions中
setTest: (context,val) => {context.commit('setTest', val)},输入现在应该是反应式的，您应该可以在@{{test}}中看到结果
下面是我如何使用Vuex：http://codepen.io/anon/pen/gmROQq处理用户输入的示例
Stack Overflow用户
发布于 2018-06-09 08:25:30
通过使用我的库，您可以轻松地将v-model与Vuex一起使用(在每个更改上触发操作/突变)：
https://github.com/yarsky-tgz/vuex-dot
<template>
<form>
<input v-model="name"/>
<input v-model="email"/>
</form>
</template>
<script>
import { takeState } from 'vuex-dot';
export default {
computed: {
...takeState('user')
.expose(['name', 'email'])
.commit('editUser') // payload example: { name: 'Peter'}
.map()
}
}
</script>Stack Overflow用户
发布于 2018-10-08 12:09:46
computed属性是单向的。如果您想要双向绑定，请按照其他答案的建议创建一个设置器，或者改用data属性。
import { store } from './app-store.js'
new Vue({
el: '#navbar',
store,
// computed: {
// test() {
// return this.$store.getters.test;
// }
// }
data: function() {
return { test: this.$store.getters.test };
}
});但是setter更适合验证输入值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42755289
复制相关文章
相似问题