在 Vue + Vuetify 中使用 SnackBar 作为全局组件

Question

我正在尝试创建 SnackBarComponent.vue，以便可以在我的 BaseTemplate.vue 中实现它，其中我的主菜单引用了其他路由器视图组件。

这将是我的 BaseComponent.Vue

<template>
    <v-app id="inspire">
        <v-navigation-drawer
            v-model="drawer"
            app
            clipped
        >
            <v-list dense>
                <v-list-item
                    v-for="item in items"
                    :key="item.title"
                    :to="item.to"
                    :active-class="`primary white--text`"
                    link
                >
                    <v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>

                    <v-list-item-content>
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app-bar
            app
            clipped-left
            color="blue"
            dark
        >
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title>Title</v-toolbar-title>

        </v-app-bar>

        <v-main>
            <v-container fluid style="padding:30px">
                <transition name="component-fade" mode="out-in">
                <router-view></router-view>
                </transition>
            </v-container>
        </v-main>


        <template>
            <v-snackbar
                v-model="snackbar"
                :timeout="timeoutSnackBar"
            >
                {{ textSnackBar }}
            </v-snackbar>
        </template>


    </v-app>
</template>
<script>
export default {
    data: () => ({
        snackbar: false,
        timeoutSnackBar: -1,
        textSnackBar: '',
        methods:{
         SnackNotification(time,text){
this.snackbar = true
this.timeoutSnackBar: time
this.textSnackBar: text
}

          }
        drawer: null,
        items: [
            {
                title: "Home",
                icon: "mdi-view-dashboard",
                to: "/"
            },

            {
                title: "Users",
                icon: "mdi-account",
                to: "/users"
            },

           
        ]
    }),
}
</script>

我尝试在 de UserComponent.vue

中使用

<template>
  <v-card
    class="mx-auto"
    max-width="344"
    outlined
  >
    <v-list-item three-line>
      <v-list-item-content>
        <div class="overline mb-4">
          OVERLINE
        </div>
        <v-list-item-title class="headline mb-1">
          Headline 5
        </v-list-item-title>
        <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
      </v-list-item-content>

      <v-list-item-avatar
        tile
        size="80"
        color="grey"
      ></v-list-item-avatar>
    </v-list-item>

    <v-card-actions>
      <v-btn
        outlined
        rounded
        text
      >
        Button
      </v-btn>
    </v-card-actions>
  </v-card>
</template>
<script>
  export default {
created() {
        this.users();
    },
    methods: {
        users: function() {
            axios
                .get('/api/users')
                .then(response =>   {
                    this.users = response.data.data
                })
                .catch(error => {
                    this.errored = true
                })
                .finally(() => {
                    if (this.firstLoad) this.firstLoad = false
                    this.loading = false;
                    this.SnackNotification(2000,'Hi, im a notification')
                })
        },
}
</script>

我的 app.js 就是这个。

import App from './components/BaseTemplate.vue'

const app = new Vue({
    el: '#app',
    render: h => h(App),
    vuetify: new Vuetify(),
    router
})

有这样做的想法，但我认为执行此全局实施是完全错误的，我寻找了一些选项，但他们使用了 NuxtJS，这并不是我真正想到的，任何可以给我的建议怎么做？谢谢。

Answer 1

请查看我的answer here 以了解非常相似的问题。在那种情况下，他们想要一个全局“确认对话”，但在你的情况下，它是一个“全局小吃店”

我在该答案中发布的代码可用于快餐栏而不是对话框，只需极少修改。事实上，在我的项目中，我通常会同时添加两者，因为它们非常有用。

Answer 2

您可以将 vue.app 中的小吃店添加为使用 vuex 的全局小吃店。 示例：

App.vue

<template>
  <v-app>
    ...
    <v-main>
      <router-view />
    </v-main>
    ...
    <v-snackbar v-model="snackbar.active" :timeout="-1" :color="snackbar.color">
      {{ snackbar.message}}
      <template v-slot:action="{ attrs }">
        <v-btn text v-bind="attrs" @click="snackbar.active = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-app>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState(["snackbar"])
  }
};
</script>

Index.js（商店）

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    snackbar: { active: false, color: "", message: "" }
  },
  mutations: {
    SET_SNACKBAR(state, snackbar) {
      state.snackbar = snackbar;
    }
  },
  actions: {
    snackBar({ commit }, message) {
        commit("SET_SNACKBAR", {
          active: true,
          color: "success", // You can create another actions for diferent color.
          message: message
        });
      }
  }
});

现在在任何路由器视图中，您都可以像这样激活快餐栏

Example.vue

<template>
  ...
    <v-btn @click="showSnackBar()">
      Show SnackBar!
    </v-btn>
  ...
</template>

<script>
import { mapActions} from "vuex";

export default {
  methods: {
    ..mapActions(["snackBar"]),

    showSnackBar() {
      this.snackBar("Hi, I'm snackbar");
    }
  }
};
</script>