一. 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 = useFormObject.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

Laravel-Vue开发初探二：Inertia拾遗相关推荐

laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体数据驱动:通过数据变化直接影响bom展示, ...
php后台开发（二）Laravel框架
php后台开发(二)Laravel框架为了提高后台的开发效率,往往需要选择一套适合自己的开发框架,因此,选择了功能比较完善的Laravel框架,仔细学来,感觉和Python语言的框架Django非常 ...
laravel + Vue 前后端分离之项目配置 - 开发环境
既然你来到查看这篇文章,那么你应该知道PHP 版本 >=7. 接着看一下目录 |-blog |-- api |-- front 目录外部很简单,,不多说了,赶紧看重点配置Laravel 作为前 ...
初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
基于C#进行AutoCAD二次开发初探（二）——C#编写代码直接打开AutoCAD并显示图形
AutoCAD 2006 Type Library //我用的是CAD2006版 AutoCAD/ObiectDBX Common 16.0 Type Library 把这两个引用的命名空间引进来 ...
自学Vue开发Dapp去中心化钱包（二）
目录前言一.Vue基础学习二.开始使用 1.安装Node.js 2.安装淘宝npm 3.安装vue-cli 4.创建一个Vue项目 6.idea打开项目 7.安装依赖 ...
基于C#进行AutoCAD二次开发初探（一）——调用dll库
自己是测绘行业,不可避免要跟CAD打交道.因为之前用C#写了一个小软件,希望能够自动调用CAD画等高线,所以想基于C#进行Autocad的二次开发.但自己在此方面真的是零基础菜鸟一只.搜了大量的资料, ...
【Vue基本指令】一.什么是Vue；二.Vue开发的方式；三.Vue的基本指令（重点）
目录一.什么是Vue 1.前端技术的发展(html.CSS.JavaScript) (1)JQuery:是对JavaScript进行了封装,使得操作DOM.事件处理.动画处理.Ajax交互变得非常简 ...
168.Vue.js智能扫码点餐系统（二）【搭建Vue开发环境】2019.03.18
0.知识点搭建开发环境 1.搭建Vue开发环境 2.安装vue-cli脚手架安装命令 // 第一种: npm install --global vue-cli// 第二种 cnpm install ...

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

文章目录

一. Inertia流程

1. 全局变量

1.1 $page

参考文章

Laravel-Vue开发初探二：Inertia拾遗相关推荐

最新文章

热门文章