- 博客(1057)
- 资源 (22)
- 收藏
- 关注
RSS订阅原创 《Pinia实战》9.服务端渲染 (SSR)
你可以根据你的需要使用 @nuxt/devalue 的其他替代品，例如，你也可以用 JSON.stringify()/JSON.parse() 来序列化和解析你的 state，这样你可以把性能提高很多。默认情况下，@pinia/nuxt 会暴露一个自动引入的方法：usePinia()，它类似于 getActivePinia()，但在 Nuxt 中效果更好。Pinia 会将自己作为 $pinia 添加到你的应用中，所以你可以在 serverPrefetch() 等函数中使用它。
2025-04-25 10:44:38
670
原创 《Pinia实战》8.核心概念 更真实的示例
这是一个更完整的 Pinia API 示例，在 JavaScript 中也使用了类型提示。对于某些开发者来说，可能足以在不进一步阅读的情况下直接开始阅读本节内容，但我们仍然建议你先继续阅读文档的其余部分，甚至跳过此示例，在阅读完所有核心概念之后再回来。// 接受任何数量的参数，返回一个 Promise 或不返回。// 调用其他带有自动补全的 getters ✨。// 类型将自动推断为 number。// 你可以直接变更该状态。
2025-04-25 10:43:29
472
原创 《Pinia实战》7.核心概念 组件外的 Store
Pinia store 依靠 pinia 实例在所有调用中共享同一个 store 实例。实际上，useStore() 给你的 app 自动注入了 pinia 实例。这意味着，如果 pinia 实例不能自动注入，你必须手动提供给 useStore() 函数。为确保 pinia 实例被激活，最简单的方法就是将 useStore() 的调用放在 pinia 安装后才会执行的函数中。// ✅ 这样做是可行的，因为路由器是在其被安装之后开始导航的，// ❌ 失败，因为它是在创建 pinia 之前被调用的。
2025-04-25 10:42:13
503
原创 《Pinia实战》6.核心概念 插件
当添加新的 state 属性(包括 store 和 store.$state )时，你需要将类型添加到 PiniaCustomStateProperties 中。注意上面的例子使用的是 TypeScript。需要注意的是，在一个插件中， state 变更或添加(包括调用 store.$patch())都是发生在 store 被激活之前，因此不会触发任何订阅函数。值得注意的是，每个 store 都被 reactive包装过，所以可以自动解包任何它所包含的 Ref(ref()、computed()...)。
2025-04-25 10:41:02
603
原创 《Pinia实战》5.核心概念 Action
默认情况下，action 订阅器会被绑定到添加它们的组件上(如果 store 在组件的 setup() 内)。类似 getter，action 也可通过 this 访问整个 store 实例，并支持完整的类型标注(以及自动补全✨)。不同的是，action 可以是异步的，你可以在它们里面 await 调用任何 API，以及其他 action！Action 相当于组件中的 method。如果你不喜欢使用组合式 API，你也可以使用 mapActions() 辅助函数将 action 属性映射为你组件中的方法。
2025-04-25 10:39:11
557
原创 《Pinia实战》4.核心概念 Getter
因此，即使在使用常规函数定义 getter 时，我们也可以通过 this 访问到整个 store 实例，但(在 TypeScript 中)必须定义返回类型。这是为了避免 TypeScript 的已知缺陷，不过这不影响用箭头函数定义的 getter，也不会影响不使用 this 的 getter。它们只是一个被你调用的函数。// 你可以在 JavaScript 中使用 JSDoc (https://jsdoc.app/tags-returns.html)// 你也可以写一个函数来获得对 store 的访问权。
2025-04-25 10:36:03
994
原创 《Pinia实战》3.核心概念 State
如果你使用的是 Vue 2，你在 state 中创建的数据与 Vue 实例中的 data 遵循同样的规则，即 state 对象必须是清晰的，当你想向其添加新属性时，你需要调用 Vue.set()。对于像数组这样的集合，你并不一定需要使用 mapWritableState()，mapState() 也允许你调用集合上的方法，除非你想用 cartItems = [] 替换整个数组。但是，你可以 patch 它。如果你愿意，你可以用一个接口定义 state，并添加 state() 的返回值的类型。
2025-04-25 10:34:30
1179
原创 《Pinia实战》2.核心概念 定义 Store
你可以定义任意多的 store，但为了让使用 pinia 的益处最大化 (比如允许构建工具自动进行代码分割以及 TypeScript 推断)，你应该在不同的文件中去定义 store。你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
2025-04-25 10:32:24
1217
原创 《Pinia实战》1. 介绍
我基于自己开发应用的经验，同时通过阅读其他人的代码，为使用 Pinia 的用户工作，以及在 Discord 上回答问题等方式验证了一些想法。与 Vuex 相比，Pinia 不仅提供了一个更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。现在 Pinia 已经成为推荐的状态管理解决方案，它和 Vue 生态系统中的其他核心库一样，都要经过 RFC 流程，它的 API 也已经进入稳定状态。Pinia 的官方课程是。
2025-04-25 10:27:10
825
原创 《Vue Router实战教程》23.动态路由
它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。上面的例子有两个假设：第一，新添加的路由记录将与 to 位置相匹配，实际上导致与我们试图访问的位置不同。而在实际场景中，添加路由的行为更有可能发生在导航守卫之外，例如，当一个视图组件挂载时，它会注册新的路由。
2025-04-11 12:05:14
537
原创 《Vue Router实战教程》22.导航故障
如果导航被阻止，导致用户停留在同一个页面上，由 router.push 返回的 Promise 的解析值将是 Navigation Failure。正如我们在一开始所说的，有不同的情况会导致导航的中止，所有这些情况都会导致不同的 Navigation Failure。Navigation Failure 是带有一些额外属性的 Error 实例，这些属性为我们提供了足够的信息，让我们知道哪些导航被阻止了以及为什么被阻止了。当在导航守卫中返回一个新的位置时，我们会触发一个新的导航，覆盖正在进行的导航。
2025-04-11 12:04:27
597
原创 《Vue Router实战教程》21.扩展 RouterLink
RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// 如果使用 TypeScript，请添加 @ts-ignore。
2025-04-11 12:03:45
593
原创 《Vue Router实战教程》20.路由懒加载
component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。如果你使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 正确地解析语法。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。// 或在路由定义里直接使用它。
2025-04-11 12:02:47
757
原创 《Vue Router实战教程》19.滚动行为
要做到这一点，你可以返回一个 Promise，它可以返回所需的位置描述符。使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。我们可以将其与页面级过渡组件的事件挂钩，以使滚动行为与你的页面过渡很好地结合起来，但由于使用场景可能存在的差异和复杂性，我们只是提供了这个基础来实现特定的用户场景。如果返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动。// 始终滚动到顶部。
2025-04-11 12:01:56
756
原创 《Vue Router实战教程》18.过渡动效
上面的用法会对所有的路由使用相同的过渡。Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡。幸运的是，可以添加一个 key 属性来强制过渡。我们可以添加一个 after navigation hook，根据路径的深度动态添加信息到 meta 字段。也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。-- 使用任何自定义过渡和回退到 `fade` -->Transition 的 API 在这里同样适用。-- 使用动态过渡名称 -->
2025-04-11 12:01:07
623
原创 《Vue Router实战教程》17.命名路由
当在处理 KeepAlive 组件时，我们通常想要保持路由组件活跃，而不是 RouterView 本身。实践中通常不会这么做，因为这样会导致所有路由组件都使用相同的 props 和插槽。请查阅传递 props 给路由组件获取其他传递 props 的方式。而如果我们将引用放在 <router-view> 上，那引用将会被 RouterView 的实例填充，而不是路由组件本身。上面的代码等价于不带插槽的 <router-view />，但是当我们想要获得其他功能时，插槽提供了额外的扩展性。
2025-04-11 12:00:07
465
原创 《Vue Router实战教程》16.组合式 API
请注意，在模板中我们仍然可以访问 $router 和 $route，所以如果你只在模板中使用这些对象的话，是不需要 useRouter 或 useRoute 的。Vue 的组合式 API 的引入开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。组合式 API 守卫也可以用在任何由 <router-view> 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。// 用在链接里的 href。// 导航至该链接的函数。
2025-04-11 11:58:17
925
原创 《Vue Router实战教程》15.数据获取
当你使用这种方式时，我们会马上导航和渲染组件，然后在组件中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。// 用获取数据的工具函数 / API 包裹器替换 `getPost`// 用获取数据的工具函数 / API 包裹器替换 `getPost`// 侦听路由的参数，以便再次获取数据。// 侦听路由的参数，以便再次获取数据。
2025-04-11 11:57:38
740
原创 《Vue Router实战教程》14.路由元信息
我们需要遍历这个数组来检查路由记录中的 meta 字段，但是 Vue Router 还为你提供了一个 route.meta 方法，它是一个非递归合并所有 meta 字段（从父字段到子字段）的方法。这意味着你可以简单地写。例如，根据上面的路由配置，/posts/new 这个 URL 将会匹配父路由记录 (path: '/posts') 以及子路由记录 (path: 'new')。// 这段可以直接添加到你的任何 `.ts` 文件中，例如 `router.ts`// 也可以添加到一个 `.d.ts` 文件中。
2025-04-11 11:56:20
971
原创 《Vue Router实战教程》13.导航守卫
这和 router.beforeEach 类似，因为它在每次导航时都会触发，不同的是，解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。示例中的 beforeEnter 在 /user/list 和 /user/details 之间移动时不会被调用，因为它们共享相同的父级路由。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
2025-04-11 11:54:55
938
原创 《Vue Router实战教程》12.不同的历史记录模式
由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。另外，如果你使用的是 Node.js 服务器，你可以通过在服务器端使用路由器来匹配传入的 URL，如果没有匹配到路由，则用 404 来响应，从而实现回退。不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。虽然不推荐，你仍可以在浏览器应用程序中使用此模式，但请注意它不会有历史记录，这意味着你无法后退或前进。
2025-04-11 11:53:04
838
原创 《Vue Router实战教程》11.匹配当前路由的链接
如果当前路径是 /user/erina/role/admin，那么这两个链接都会被认为是匹配当前路由的，因此 router-link-active 类会应用于这两个链接。RouterLink 组件会为匹配当前路由的链接添加两个 CSS 类，router-link-active 和 router-link-exact-active。我们也许想对这个列表中匹配当前路由的链接进行视觉区分。如果你使用了嵌套路由，任何指向祖先路由的链接也会被认为是匹配当前路由的，只要相关的 params 匹配。
2025-04-11 11:52:07
645
原创 《Vue Router实战教程》10.路由组件传参
在你的组件中使用 $route 或 useRoute() 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。通常这并不是一个好主意，因为这意味着所有的视图组件都声明了一个 view-prop prop，但这未必需要。如果你需要状态来定义 props，请使用包装组件，这样 vue 才可以对状态变化做出反应。当 props 是一个对象时，它将原样设置为组件 props。当 props 设置为 true 时，route.params 将被设置为组件的 props。
2025-04-11 11:51:21
671
原创 《Vue Router实战教程》9.重定向和别名
通过别名，你可以自由地将 UI 结构映射到一个任意的 URL，而不受配置的嵌套结构的限制。使别名以 / 开头，以使嵌套路径中的路径成为绝对路径。将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。// 将总是把/users/123/posts重定向到/users/123/profile。重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。// return 重定向的字符串路径/路径对象。
2025-04-11 11:50:03
858
原创 《Vue Router实战教程》8.命名视图
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。注意：我们先忘记 HTML/CSS 具体的布局的样子，只专注在用到的组件上。
2025-04-11 11:47:34
725
原创 《Vue Router实战教程》7.编程式导航
你可能已经注意到，router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版，它们确实模仿了 window.history 的 API。它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。// 带查询参数，结果是 /register?
2025-04-11 11:46:35
577
原创 《Vue Router实战教程》6.命名路由
Vue Router 有很多其他部分可以传入网址，例如 router.push() 和 router.replace() 方法。我们将在编程式导航指南中详细介绍这些方法。所有路由的命名都必须是唯一的。如果为多条路由添加相同的命名，路由器只会保留最后那一条。你可以在动态路由章节了解更多。上述示例将创建一个指向 /user/erina 的链接。
2025-04-11 11:44:17
234
原创 《Vue Router实战教程》5.嵌套路由
例如，你想导航 /user/:id 而不显示嵌套路由。此时，按照上面的配置，当你访问 /user/eduardo 时，在 User 的 router-view 里面什么都不会呈现，因为没有匹配到嵌套路由。这对于将具有公共路径前缀的路由分组在一起或使用更高级的功能时很有用，例如：路由独享的守卫或路由元信息。// UserProfile 将被渲染到 User 的 <router-view> 内部。// 当 /user/:id/profile 匹配成功。// 当 /user/:id/posts 匹配成功。
2025-04-11 11:41:03
959
原创 《Vue Router实战教程》4.路由的匹配语法
例如，路由 /users 将匹配 /users、/users/、甚至 /Users/。// 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/// /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等。// /:chapters -> 匹配 /one, /one/two, /one/two/three, 等。// - /users/posva/ 当 strict: true。
2025-04-11 11:39:05
736
原创 《Vue Router实战教程》3.动态路由匹配
使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。Vue Router 使用自己的路径匹配语法，其灵感来自于 express，因此它支持许多高级匹配模式，如可选的参数，零或多个 / 一个或多个，甚至自定义的正则匹配规则。// 将匹配以 `/user-` 开头的所有内容，并将其放在 `route.params.afterUser` 下。// 保留当前路径并删除第一个字符，以避免目标 URL 以 `//` 开头。
2025-04-11 11:37:07
1068
原创 《Vue Router实战教程》2.入门
在演练场的示例里，我们使用了 createMemoryHistory()，它会完全忽略浏览器的 URL 而使用其自己内部的 URL。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。在演练场示例中的 HomeView.vue 组件中，路由器就是这样获取的。上述通过 create-vue 创建的示例项目使用了与我们在这里看到的类似的功能，对于探索后续介绍的其他功能而言，也许你会觉得这是一个不错的起点。
2025-04-11 11:34:44
1189
原创 《Vue Router实战教程》1.设置
你也可以通过像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。Vue Router 是 Vue.js 的官方路由。使用包管理器的项目通常会使用 ES 模块来访问 Vue Router，例如 import { createRouter } from 'vue-router'。如果您选择安装 Vue Router，示例应用还将演示 Vue Router 的一些核心特性。
2025-04-11 11:32:18
654
原创 Navicat连接MySQL8报错：1251- Client does not support authentication protocol requested by server...
错误信息：1251- Client does not support authentication protocol requested by server；
2025-03-30 11:55:43
175
原创 Redis bat脚本方式启动
rem 设置编码格式为UTF-8。@echo 启动Redis...@echo Redis启动成功。@rem 关闭回显状态。
2025-03-19 09:44:37
143
原创 Command line is too long. Shorten the command line via JAR manifest or via a classpath file and reru
运行IDEA时报错，错误信息，如下所示：Error running 'JeecgSystemApplication' Error running JeecgSystemApplication. Command line is too long. Shorten the command line via JAR manifest or via a classpath file and rerun.修改Edit Configrations...，如下所示：修改Modify options，如下所示：
2025-03-14 11:53:11
295
原创 免费PDF工具
Smallpdf.com-解决您所有PDF问题的免费解决方案Smallpdf-这个平台使转换和编辑所有PDF文件变得超级容易。在一个地方解决所有PDF问题-是的，免费。https://smallpdf.com/#r=app
2025-02-24 08:21:54
489
本资源即可被刚开始学习Pinia的朋友当作学习指南，也可以被那些想深入了解Pinia某方面功能的资深用户作为参考资料
2025-04-25
### Vue Router 实战教程（第4版）总结
2025-04-18
CAS单点登录（第7版）
2025-02-16
jhipster-book-pdf-screen-v7.0.2-1686129670176
2023-07-16
GeoServer跨域问题.zip
2021-10-21
mirrors-dbproxy-master.zip
2020-12-27
TDengine-server-2.0.9.0-Linux-x64.tar.gz
2020-12-10
TDengine-server-2.0.9.0-Linux-x64.rpm
2020-12-10
specialroutes-service.zip
2020-05-05
Java教程.zip
2020-03-12
Linux从入门到精通.zip
2020-03-12
Spring Boot 2.X 实战教程.pdf
2019-07-30
JHipster-minibook-aprilv-1556109659909.pdf
2019-06-19
Angular实战教程V1.0
2019-03-23
DH-UAP平台简介V1.0
2019-01-10
软件开发合同模板范本（5 篇）
2018-08-23
H2 Java SQL数据库
2018-07-17
Spring简介
2018-07-17
Activiti6用户指南
2018-07-16
Activiti6快速入门指南
2018-07-16
35岁以上的大龄程序员都干啥去了？
2024-09-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人