vue+vuex+vuetify

1.在資料夾components下新建資料夾Dialog.vue

<template>
  <v-layout row justify-cneter>
    <v-dialog v-model="isShowFormDig" persistent max-width="680px">
      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          Privacy Policy
        </v-card-title>
        <v-card-text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="isDialogClose"
          >
            取消
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
    name:'my-dialogs',
		data () {
			return {
            isShowFormDig: false,
        }
    },
    computed: {
        ...mapGetters(['isDialogShowOn'])
    },
   watch: {
       'isDialogShowOn': function(n, o) {
           this.isShowFormDig = n;
           console.log(o)
       }
   },
    methods: {
        isDialogClose(){
            this.$store.commit('dialogClick',false);
        }
    }
}
    
</script>

<style>

</style>
 

2.store中通過狀態管理控制對話方塊的顯示

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isDialogShowOn: false,
  },
  mutations: {
    dialogClick(state, isDialogShowOn) {
      state.isDialogShowOn = isDialogShowOn;
      console.log(state.isDialogShowOn)
    },

  },
  actions: {
    addDialog({commit}, isDialogShowOn) {
      commit('dialogClick',isDialogShowOn)
    } 
  },
  getters: {
    isDialogShowOn(state){
      return state.isDialogShowOn
    }
  }
})
 

3.main.js中註冊全域性元件

import Dialogs from './components/index'
Vue.use(Dialogs)