如何使用 Laravel 8、Inertia.js 和 Vue3 定义全局变量？

Question

我想在默认 app.js 文件中定义全局变量或 provide/inject 或其他方式。

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
import { useToast } from "vue-toastification";

const appName = window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
const toast = useToast();

createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => require(`./Pages/${name}.vue`),
  setup({ el, app, props, plugin }) {
    return createApp({ render: () => h(app, props) })
      .use(Toast)
      .use(plugin)
      .mixin({ methods: { route } })
      .mount(el);
  },
});

我想将 toast 变量传递给所有其他组件。

以下是我迄今为止尝试过的一些方法：

Vue3 全局属性

createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => require(`./Pages/${name}.vue`),
  setup({ el, app, props, plugin }) {
    app.config.globalProperties.$toast = toast; // Cannot read properties of undefined (reading 'globalProperties')

    return createApp({ render: () => h(app, props) })
      .use(Toast)
      .use(plugin)
      .mixin({ methods: { route } })
      .mount(el);
  },
});

也在AppLayout.vue

  setup() {
    const toast = useToast();

    return { toast };
  },

  provide: {
    toast: this.toast,
  },

我试图在其中一个子组件中注入这个。

inject: ["toast"]

我收到错误 'injection "toast" not found.'

Answer 1

与此答案相关 () 配置字段属于 根实例 而不是 根组件 。 Vue.createApp(app) return root 实例 和 myApp.mount('#app') return root 组件。您应该在 createApp 之后和安装之前配置您的全局属性，如下所示：

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
import { useToast } from "vue-toastification";

const appName = window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
const toast = useToast();

createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => require(`./Pages/${name}.vue`),
  setup({ el, app, props, plugin }) {
    const myApp = createApp({ render: () => h(app, props) })
      .use(Toast)
      .use(plugin)
      .mixin({ methods: { route } });

    // config global property after createApp and before mount
    myApp.config.globalProperties.$toast = toast;

    myApp.mount(el);
    return myApp;
  },
});

因此您可以在所有组件中使用全局属性：

mounted() {
  console.log('global toast property: ', this.$toast);
}

如何使用 Laravel 8、Inertia.js 和 Vue3 定义全局变量？

How can i define a global variable with Laravel 8, Inertia.js and Vue3?

global-variables

laravel-8

vuejs3

inertiajs