Probleme mit Router-Push- und Prompt-Benachrichtigungen in Laravel und VUE 3

Question

Ich habe ein Problem: Beim Wechseln zwischen Komponenten mithilfe von router.push wird die Toast-Benachrichtigung nicht angezeigt. Ich habe eine Benutzerbearbeitungsansicht und möchte nach der Bearbeitung zum Profil des Benutzers umleiten und sofort eine Toastbenachrichtigung anzeigen.

Grob gesagt habe ich Folgendes:

Routes.js

import { createRouter, createWebHistory } from 'vue-router';

//Modules
import DashboardIndex from './components/modules/dashboard';
//Users
import UsersIndex from './components/modules/users';
import UsersCreate from './components/modules/users/create';
import UsersEdit from './components/modules/users/edit';
import UsersView from './components/modules/users/view';


export default new createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', name: 'dashboard.index', component: DashboardIndex },
        { path: '/users',  name: 'users.index', component: UsersIndex},
        { path: '/user/create',  name: 'user.create', component: UsersCreate},
        { path: '/user/edit/:id',  name: 'user.edit',  props: true, component: UsersEdit},
        { path: '/user/:id',  name: 'user.view',  props: true, component: UsersView},
    

    ]
})

Combinable/user.js

import axios from 'axios';
import { useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast';

export default function useUsers() {

    const users = ref([])
    const user = ref([])
    const errors = ref([])
    const router = useRouter()
    const toast = useToast()
    /**
     * 
     * All Users
     * 
     */
    const getUsers = async () => {
       const response = await axios.get('/admin/users')
       users.value = response.data
    }
    /**
     * 
     * Create User
     * 
     */
    const storeUser = async (data) => {
        try {
            let response = await axios.post('/admin/user', data)
            await router.push({ name: 'user.view',  params: { id: response.data.id } })
        } catch (e) {
            if (e.response.status === 422) {
                errors.value = e.response.data.errors    
            }
        }
 
    }
    /**
     * 
     * Create User
     * 
     */
     const updateUser = async (id) => {
        try {
            //this.showToast = true;
            let response = await axios.put(`/admin/user/${id}`, user.value)
            router.push({ name: 'user.view',  params: { id: response.data.id } })
            toast.add({severity:'success', summary: 'Éxito', detail: 'El Usuario ha sido modificado', life: 3000})
        } catch (e) {
            if (e.response.status === 422) {
                errors.value = e.response.data.errors    
            }
        }

    }
     /**
     * 
     * View User
     * 
     */
    const showUser = async (id) => {
        let response = await axios.get(`/admin/user/${id}`)
        user.value = response.data

    }
 
    /**
     * 
     * Delete User
     * 
     */
    const destroyUser = async (id) => {
        await axios.delete(`/admin/user/${id}`)
    }
     

    return {errors, users, user, getUsers, storeUser, updateUser, showUser, destroyUser}

}

View.vue

<template>
  <div class="container-fluid">
    <Toast position="bottom-right"/>
USER PROFILE
                </div>
</template>
<script>
    import useUsers from '../../../composables/users'
    import { onMounted } from 'vue';

    export default {
        props: {
            id: { required: true }
        },
     
        setup(props) {

            const { user, showUser } = useUsers();

            const showUserMounted =  async () => {
                await showUser(props.id)
            }
            onMounted(showUserMounted)
           
            return { user }
        }
    }
    </script>

Wichtige Tatsache: Ich verwende Prime VUE.

Außerdem habe ich kommentiert, dass, wenn ich zu toast.add({severity:'success', Summary: 'Success',detail: 'The User has been Modified', life: 3000}) in showUser gehe, Toast angezeigt werden kann Nachrichten schön.

Ich denke, was ich brauche, ist ein Flag, das den Wert in der updateUser-Methode ändert (z. B. showToast = true) und anhand der showUser-Methode überprüft, ob es wahr ist, und wenn ja, toast.add ausführen, aber ich nicht 'In Am Ende wusste ich nicht, was ich tun sollte.

Vielen Dank.

Answer 1

使用 pinia 进行商店提醒，您可以访问整个应用程序的提醒：

import { defineStore } from "pinia";
import { useToast } from "primevue/usetoast";

export const useAlertStore = defineStore({
    id: "alert",
    state: () => ({
        toast: useToast(),
    }),
    actions: {
        success(title, message) {
            this.toast.add({
                severity: "success",
                summary: title,
                detail: message,
                life: 3000,
            });
        },
        info(title, message) {
            this.toast.add({
                severity: "info",
                summary: title,
                detail: message,
                life: 3000,
            });
        },
        warn(title, message) {
            this.toast.add({
                severity: "warn",
                summary: title,
                detail: message,
                life: 3000,
            });
        },
        error(title, message) {
            this.toast.add({
                severity: "error",
                summary: title,
                detail: message,
                life: 3000,
            });
        },
    },
});

然后例如我的登录功能：

const alert = useAlertStore();

async function login() {
    const authStore = useAuthStore();
    await authStore.login(formData.email, formData.password);
    alert.success(
        t("alerts.loginTitle"),
        t("alerts.user") + `${authStore.user.name} ` + t("alerts.loginMessage")
    );
}

最后将 Toast 组件添加到您的 App.vue 文件中：

<template>
    <Toast />
    <router-view />
</template>