vue2.0+vuex实现全局对话框

古城微笑少年丶 2023-10-18 10:38 47阅读 0赞

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)