[ vue ] 监听v-model数据的变化，只要有变化就改变vuex的state值

场景描述：

1. 注册弹出框是用 v-model 绑定数据  showRegisterModal  实现的，点击遮罩层框架会把  showRegisterModal=false 

2.REGISTER按钮 showRegisterModal=true

3.showRegisterModal 希望是vuex里面的数据，我们可以在任何地方控制弹出框的开和关。

 

解决方案

<template>
  <div class="q-mt-md">
    <div>
      <q-btn label="Register" @click="showRegisterModal=true"/>
      
      <q-dialog v-model="showRegisterModal">
        <q-card style="width:400px;">
          <Register />
        </q-card>
      </q-dialog>
  </div>
</template>

<script>
import Register from 'components/Register.vue'
export default {
  components:{Register},
 computed:{ showRegisterModal:{ get(){ return this.$store.state.myself.show_register_modal }, set(value){ this.$store.commit('myself/HANDLE_REGISTER_MODAL', value) } } }
}
</script>

 

 

备注

这样实现有点曲线救国，小场景用不到，于是我改进了一下：https://www.cnblogs.com/remly/p/12981671.html