手动访问 Manual visits

未匹配的标注

除了创建链接,还可以使用 Inertia.visit() 方法手动进行 Inertia 访问。

Vue 2 / Vue 3

// import { Inertia } from '@inertiajs/inertia'

this.$inertia.visit(url, {
  method: 'get',
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  onCancelToken: cancelToken => {},
  onCancel: () => {},
  onBefore: visit => {},
  onStart: visit => {},
  onProgress: progress => {},
  onSuccess: page => {},
  onError: errors => {},
  onFinish: visit => {},
})

通常,最好使用以下其中一种快捷方法。这些方法与 Inertia.visit() 共享所有相同的选项。

Vue 2 / Vue 3

// import { Inertia } from '@inertiajs/inertia'

this.$inertia.get(url, data, options)
this.$inertia.post(url, data, options)
this.$inertia.put(url, data, options)
this.$inertia.patch(url, data, options)
this.$inertia.delete(url, options)
this.$inertia.reload(options) // 使用当前 URL

reload() 方法只是自动访问当前页面的简写,preserveStatepreserveScroll 都设置为 true。

Method

使用 method 选项将请求方法设置为 getpostputpatchdelete。 默认是get

Inertia.visit(url, { method: 'post' })

Laravel 不支持通过 putpatch 上传文件。 相反,请通过 post 发出请求,包括设置为 putpatch_method 字段。 这称为 表单方法欺骗

Data

使用 data 选项将数据添加到请求中。

Inertia.visit('/users', {
  method: 'post',
  data: {
    name: 'John Doe',
    email: 'john.doe@example.com',
  },
})

为方便起见,get()post()put()patch() 方法都包含 data 作为第二个参数。

Inertia.post('/users', {
  name: 'John Doe',
  email: 'john.doe@example.com',
})

浏览器历史记录

当进行访问时,Inertia 会自动在浏览器历史记录中添加一个新条目。 也可以通过将 replace 选项设置为 true 来替换当前的历史记录条目。

Inertia.get('/users', { search: 'John' }, { replace: true })

对同一网址的访问会自动将 replace 设置为 true

组件状态

默认情况下,对同一页面的页面访问会强制使用新的页面组件实例,这会清除任何本地状态,例如表单输入、滚动位置和焦点状态。

在某些情况下,有必要保留页面组件状态。 例如,提交表单时,您需要保留表单数据,以防再次出现验证错误。

这可以通过将 preserveState 选项设置为 true 来完成。

Inertia.get('/users', { search: 'John' }, { preserveState: true })

您还可以通过提供回调来根据响应延迟评估 preserveState 选项。

Inertia.post('/users', data, {
  preserveState: (page) => Object.keys(page.props.errors).length,
})

为方便起见,postputpatchdeletereload 方法都默认将 preserveState 设置为 true

滚动保存

在页面之间导航时,Inertia 通过自动重置文档正文(以及您定义的任何 滚动区域 的滚动位置来模仿默认浏览器行为 ),回到顶部。 使用 preserveScroll 选项禁用此行为。

Inertia.visit(url, { preserveScroll: true })

您还可以通过提供回调,根据响应延迟评估preserveScroll 选项。

Inertia.post('/users', data, {
  preserveScroll: (page) => Object.keys(page.props.errors).length,
})

有关详细信息,请参阅 滚动管理 页面。

部分重装

only 选项允许您在后续访问同一页面时从服务器请求一部分 props(数据)。

Inertia.visit('/users', { search: 'John' }, { only: ['users'] })

有关详细信息,请参阅 部分重新加载 页面。

错误包

对于具有多个表单的页面,如果两个表单共享相同的字段名称,则在显示验证错误时可能会遇到冲突。 为了解决这个问题,您可以使用错误包。 错误包将服务器返回的验证错误限定在特定于该表单的唯一键中。

Inertia.post('/companies', data, {
  errorBag: 'createCompany',
})

有关详细信息,请参阅 验证 页面。

文件上传

在进行包含文件的访问时,Inertia 会自动将请求数据转换为 FormData 对象。 如果您希望访问始终使用 FormData 对象,您可以使用forceFormData 选项强制执行此操作。

Inertia.post('/companies', data, {
  forceFormData: true,
})

请参阅文件上传 页面了解更多信息。

自定义标题

headers 选项允许您将自定义标头添加到请求中。

Inertia.post('/users', data, {
  headers: {
    'Custom-Header': 'value',
  },
})

Inertia 标头具有优先权,因此不能被覆盖。

访问取消

您可以使用取消令牌来取消请求,Inertia 会在请求之前通过 onCancelToken() 回调自动生成并提供该令牌。

Inertia.post('/users', data, {
  onCancelToken: (cancelToken) => (this.cancelToken = cancelToken),
})

// 取消访问
this.cancelToken.cancel()

当访问被取消时,onCancel()onFinish() 事件回调都会被调用。

Event callbacks

除了全局事件,Inertia 还提供了许多每次访问事件回调。

Inertia.post('/users', data, {
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onCancel: () => {},
  onFinish: visit => {},
})

onBefore() 回调中返回 false 将导致访问被取消。

Inertia.delete(`/users/${user.id}`, {
  onBefore: () => confirm('Are you sure you want to delete this user?'),
})

也可以从 onSuccess()onError() 回调中返回一个承诺。 这将延迟“完成”事件,直到承诺解决。

Inertia.post(url, {
  onSuccess: () => {
    return Promise.all([
      this.doThing(),
      this.doAnotherThing()
    ])
  }
  onFinish: visit => {
     // 直到 doThing() 才会调用
     // 并且 doAnotherThing() 已经完成。
  },
})

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/inertia/0.11/ma...

译文地址:https://learnku.com/docs/inertia/0.11/ma...

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
贡献者:2
讨论数量: 0
发起讨论 只看当前版本


暂无话题~