[ 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="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

原文地址:https://www.cnblogs.com/remly/p/12981582.html