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

【问题标题】：How can i define a global variable with Laravel 8, Inertia.js and Vue3?如何使用 Laravel 8、Inertia.js 和 Vue3 定义全局变量？
【发布时间】：2021-12-18 11:17:18
【问题描述】：

我想在默认的 app.js 文件中定义一个全局变量或提供/注入或其他方式。

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"]

我收到错误“找不到注入“toast”。”

【问题讨论】：

标签： global-variables laravel-8 vuejs3 inertiajs

【解决方案1】：

与此答案相关 (Use filter in Vue3 but can't read globalProperties) 配置字段属于 根实例 不属于 根组件。 Vue.createApp(app) 返回根实例，myApp.mount('#app') 返回根组件。您应该在 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);
}

【讨论】：