Laravel-Vue开发初探二：Inertia拾遗

一. Inertia流程

1. 全局变量

1.1 $page

问题：
在查看JetStream给的登录界面代码中，入口文件如下：

cat \resources\js\Pages\Welcome.vue

发现这里有一段代码有个$page属性比较奇怪，原文如下：

<inertia-link v-if="$page.props.user" href="/dashboard" class="text-sm text-gray-700 underline">

在Vue中，我知道有$ref/$attr/$data这些带着$的系统定义属性，但是$page是什么东西？

回答：
首先看一下这个文件:

cat \node_modules\@inertiajs\inertia-vue3\src\app.js

目前猜测，这应该是Inertia进行环境初始化的主文件。里面有两个导出配置:

export const plugin = {
  install(app) {
    Inertia.form = useForm
    Object.defineProperty(app.config.globalProperties, '$inertia', { get: () => Inertia })
    Object.defineProperty(app.config.globalProperties, '$page', { get: () => page.value })
    app.mixin(remember)
    app.component('InertiaLink', link)
  },
}

export function usePage() {
  return {
    props: computed(() => page.value.props),
    url: computed(() => page.value.url),
    component: computed(() => page.value.component),
    version: computed(() => page.value.version),
  }
}

在Inertia的ShareData文档中也提到，访问共享数据可以使用：
Access shared data using the $page property or the usePage() hook.
所以，$page就是Inertia提供的可以方便访问页面属性的全局变量了。

引申：

这里所谓的页面属性，其实是利用了HTML5的自定义属性"data-*"来实现的。
Inertia将我们访问的根页面，设定为这样的div：

<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"xxxxxx"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>

有了这个根元素，在Vue中就可以通过document.getElementById('app').dataset.page来获取我们给定的Json数据，在Vue中还原出这样的数据结构：

• component: The name of the JavaScript page component.
• props: The page props (data).
• url: The page url.
• version: The current asset version.

创建Vue实例的具体代码如下：

const el = document.getElementById('app')
createApp({
  render: () => h(App, {
    initialPage: JSON.parse(el.dataset.page), // html中给的服务端数据
    resolveComponent: name => require(`./Pages/${name}`).default,
  })
}).use(plugin).mount(el)

参考文章

https://inertiajs.com/client-side-setup