如何才能让<input>的v-model和vuex中的数据快速绑定上?

比如进入某一个组件的时候,某个<input>的v-model指向的是vuex中存储的数据,这显然是不可以的,因为修改vuex中的数据只能用mutation。

但问题是我当前的组件所需的数据只能来自vuex,如何才能让<input>和vuex中的数据快速绑定上?

或者说,如何在组件自身中,创建一份vuex数据的副本直供该组件内部使用。

阅读 18.6k
5 个回答
<input v-model="test">

computed: {
  test: {
    get () {
      return this.$store.state.test
    },
    set (val) {
      this.$store.commit('setTest', val)
    }
  }
}

你操作的时候,给这个数据传参进去就可了啊,通过watch来监听,当input中的值发生变化,将值重新赋值
<input v-model="$store.getters.value">
export default{
data(){},
watch:{
"$store.getters.value":function(oldval,newval){

   this.$store.commit('value',newval)

}
}

}

store.js
let state={value:''};
let getters={ value:state=>state.value};
let mutation={
value(state,data){

    state.value=data
}

};
let actions={};
export default new Vuex.Store({
state,
mutations,
actions,
getters
})

新手上路,请多包涵

vuex要耦合业务
组件要脱离业务

你好,请问你解决了嘛? 我也遇到了和你一样的问题,而且这个input框中的内容是可以再输入再提交的,而且当提交的内容还是一个表单的时候怎么办?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏