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

Posted 2023-03-21

【中文标题】如何使用 Laravel 8、Inertia.js 和 Vue3 定义全局变量？

【英文标题】：How can i define a global variable with Laravel 8, Inertia.js and 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”。”

【参考方案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);