Laravel和VUE 3中的路由器推送和提示通知问题

Question

我有一个问题，当使用 router.push 在组件之间切换时，不会显示 Toast 通知。我有用户编辑视图，我想要做的是在编辑后重定向到用户的个人资料并立即显示 toast 通知。

粗略地说，我有以下内容：

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},
    

    ]
})

可组合/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>

重要的事实，我正在使用 Prime VUE。

此外，我还评论说，当我转到 toast.add({severity:'success', Summary: 'Success',detail: 'The User has been Modified', life: 3000}) 在 showUser 中，可以很好地显示 toast 消息。

我认为我需要的是一个标志，它可以更改 updateUser 方法中的值（例如 showToast = true），并从 showUser 方法验证它是否为 true，如果是，则执行 toast.add，但我不'最后不知道该怎么做。

非常感谢。

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>