如何使用v-model实现双向绑定vuex的state

Web前端 潘老师 2年前 (2021-01-18) 1480 ℃ (0) 扫码查看

有时候我们需要使用v-model实现对vuex的state中数据的双向绑定,我们该如何实现呢?
我们的html代码如下:

<div id="app">
    用户名:<input type="text" v-model="username" />
</div>

计算属性为:

// ...
computed:{
      username:{
          get(){
              return this.$store.state.username;
          }
          set(value){
              this.$store.commit('updateUsername',value);
          }
      }
  }

vuex中的代码为:

const store = new Vuex.Store({
    // ...
    state:{
        username:"小明"
    },
    mutations:{
        updateUsername(state,playload){
            state.username = playload;
        }
    },
    //严格模式
    //strict:true

})

注意事项:
严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。因此使用v-model后不要使用严格模式,而且不要在生产环境下启用严格模式

版权声明:本站所有文章,如无特殊说明,均为本站原创。转载请务必注明文章来源,谢谢支持。
本文链接:https://www.panziye.com/java/web/1850.html
喜欢 (5)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】