Laravel 10/Vue3/Inertia 1.0中如何声明Vue全局可访问常量？

下面提供三种可行的实现方式，根据你的需求选择最合适的：

方法1：注册Vue全局属性（带$前缀） #

这是最快速的实现方式，直接在resources/js/app.js中给Vue实例添加全局属性：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
      .use(plugin)
      // 注册全局常量
      .config.globalProperties.$abc = 'def'

    app.mount(el)
  },
})

在Vue页面中直接通过{{ $abc }}调用即可。

方法2：使用Provide/Inject全局注入（无前缀） #

如果希望直接用{{ abc }}调用，可通过Vue的provide/inject机制实现全局共享：

1. 在app.js的setup中提供常量：

import { createApp, h, provide } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    const app = createApp({ 
      setup() {
        // 提供全局常量
        provide('abc', 'def')
      },
      render: () => h(App, props) 
    })
      .use(plugin)

    app.mount(el)
  },
})

2. 在需要使用的Vue页面中注入：

import { inject } from 'vue'

export default {
  setup() {
    const abc = inject('abc')
    return { abc }
  }
}

完成后就能用{{ abc }}直接调用了。

方法3：自定义插件自动混入（无前缀，无需手动注入） #

如果有多个全局常量需要共享，推荐用这种方式，一次性配置后所有页面自动可用：

1. 创建插件文件resources/js/plugins/globalConstants.js：

export default {
  install(app) {
    // 定义你的全局常量
    const globalConsts = {
      abc: 'def',
      // 可以添加更多常量
      // foo: 'bar'
    }

    // 通过全局混入，自动注入到所有组件
    app.mixin({
      setup() {
        return { ...globalConsts }
      }
    })
  }
}

2. 在app.js中引入并使用插件：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import globalConstants from './plugins/globalConstants'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(globalConstants)

    app.mount(el)
  },
})

之后所有Vue页面都能直接用{{ abc }}调用常量，无需任何额外代码。

内容的提问来源于stack exchange，提问作者Alex