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

有时候我们需要使用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

})

喜欢 (5)赏

【请潘老师喝杯Coffee吧！】

分享 (0)