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

Web前端 潘老师 9个月前 (01-18) 870 ℃ (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后不要使用严格模式,而且不要在生产环境下启用严格模式

版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:如何使用v-model实现双向绑定vuex的state
喜欢 (5)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

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

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

您也可以 微信登录 来发表评论!