[ 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