双向绑定和 vuex 是否冲突

在严格模式中使用Vuex,当用户输入时,v-model会试图直接修改属性值,但这个修改不是在mutation中修改的,所以会抛出一个错误。当需要在组件中使用vuex中的state时,有2种解决方案:
1、在input中绑定value(vuex中的state),然后监听input的change或者input事件,在事件回调中调用mutation修改state的值
2、使用带有setter的双向绑定计算属性。见以下例子(来自官方文档):

<input v-model="message">
computed: { message: { get () { return 
this.$store.state.obj.message }, set (value) { 
this.$store.commit('updateMessage', value) } } }
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现input双向绑定vuex数据,需要在组件中使用computed属性将vuexstate映射到组件的data中,然后使用v-model指令进行双向绑定。当input的值改变时,通过调用vuex的mutation来修改state的值。 以下是一个示例代码: ```html <template> <div> <p>输入的内容:{{inputValue}}</p> <input v-model="inputValue" /> </div> </template> <script> import { mapState, mapMutations } from 'vuex' export default { computed: { ...mapState(['inputValue']) }, methods: { ...mapMutations(['updateInputValue']) } } </script> ``` 在上面的代码中,我们使用了Vuex的mapState和mapMutations方法,将vuexstate和mutation映射到了组件的computed属性和methods属性中。其中,mapState方法会返回一个对象,对象中包含了我们所需要的vuexstate,我们将其映射到了组件的data中,以便进行双向绑定。而mapMutations方法返回的是一个对象,对象中包含了我们所需要的vuex的mutation,我们将其映射到了组件的methods中,以便在input值改变时调用mutation来修改vuexstate。 在vuex的store.js中,我们需要定义一个mutation,用于更新state中的inputValue值: ```js const store = new Vuex.Store({ state: { inputValue: '' }, mutations: { updateInputValue(state, value) { state.inputValue = value } } }) ``` 这样就实现了input双向绑定vuex数据的功能,当input的值改变时,调用mutation来修改vuexstate的值,从而实现了数据的同步。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值