前端模板

于 2019-06-07 21:17:38 发布
阅读量2.1k 收藏 6
点赞数
分类专栏： Template
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daqiang012/article/details/91146268
版权
本文推荐了五个优秀的网页设计资源平台，包括WrapPixel、PIXINVENT、CreativeTim、themeforest和bootstraptaste，这些平台提供了丰富的网页设计模板和素材，是网页设计师和前端开发者不可错过的宝藏资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

博客
《Pinia实战》10.手册
04-25 316
手册。
博客
《Pinia实战》9.服务端渲染 (SSR)
04-25 670
你可以根据你的需要使用 @nuxt/devalue 的其他替代品，例如，你也可以用 JSON.stringify()/JSON.parse() 来序列化和解析你的 state，这样你可以把性能提高很多。默认情况下，@pinia/nuxt 会暴露一个自动引入的方法：usePinia()，它类似于 getActivePinia()，但在 Nuxt 中效果更好。Pinia 会将自己作为 $pinia 添加到你的应用中，所以你可以在 serverPrefetch() 等函数中使用它。
博客
《Pinia实战》8.核心概念 更真实的示例
04-25 472
这是一个更完整的 Pinia API 示例，在 JavaScript 中也使用了类型提示。对于某些开发者来说，可能足以在不进一步阅读的情况下直接开始阅读本节内容，但我们仍然建议你先继续阅读文档的其余部分，甚至跳过此示例，在阅读完所有核心概念之后再回来。// 接受任何数量的参数，返回一个 Promise 或不返回。// 调用其他带有自动补全的 getters ✨。// 类型将自动推断为 number。// 你可以直接变更该状态。
博客
《Pinia实战》7.核心概念 组件外的 Store
04-25 503
Pinia store 依靠 pinia 实例在所有调用中共享同一个 store 实例。实际上，useStore() 给你的 app 自动注入了 pinia 实例。这意味着，如果 pinia 实例不能自动注入，你必须手动提供给 useStore() 函数。为确保 pinia 实例被激活，最简单的方法就是将 useStore() 的调用放在 pinia 安装后才会执行的函数中。// ✅ 这样做是可行的，因为路由器是在其被安装之后开始导航的，// ❌ 失败，因为它是在创建 pinia 之前被调用的。
博客
《Pinia实战》6.核心概念 插件
04-25 604
当添加新的 state 属性(包括 store 和 store.$state )时，你需要将类型添加到 PiniaCustomStateProperties 中。注意上面的例子使用的是 TypeScript。需要注意的是，在一个插件中， state 变更或添加(包括调用 store.$patch())都是发生在 store 被激活之前，因此不会触发任何订阅函数。值得注意的是，每个 store 都被 reactive包装过，所以可以自动解包任何它所包含的 Ref(ref()、computed()...)。
博客
《Pinia实战》5.核心概念 Action
04-25 558
默认情况下，action 订阅器会被绑定到添加它们的组件上(如果 store 在组件的 setup() 内)。类似 getter，action 也可通过 this 访问整个 store 实例，并支持完整的类型标注(以及自动补全✨)。不同的是，action 可以是异步的，你可以在它们里面 await 调用任何 API，以及其他 action！Action 相当于组件中的 method。如果你不喜欢使用组合式 API，你也可以使用 mapActions() 辅助函数将 action 属性映射为你组件中的方法。
博客
《Pinia实战》4.核心概念 Getter
04-25 994
因此，即使在使用常规函数定义 getter 时，我们也可以通过 this 访问到整个 store 实例，但(在 TypeScript 中)必须定义返回类型。这是为了避免 TypeScript 的已知缺陷，不过这不影响用箭头函数定义的 getter，也不会影响不使用 this 的 getter。它们只是一个被你调用的函数。// 你可以在 JavaScript 中使用 JSDoc (https://jsdoc.app/tags-returns.html)// 你也可以写一个函数来获得对 store 的访问权。
博客
《Pinia实战》3.核心概念 State
04-25 1181
如果你使用的是 Vue 2，你在 state 中创建的数据与 Vue 实例中的 data 遵循同样的规则，即 state 对象必须是清晰的，当你想向其添加新属性时，你需要调用 Vue.set()。对于像数组这样的集合，你并不一定需要使用 mapWritableState()，mapState() 也允许你调用集合上的方法，除非你想用 cartItems = [] 替换整个数组。但是，你可以 patch 它。如果你愿意，你可以用一个接口定义 state，并添加 state() 的返回值的类型。
博客
《Pinia实战》2.核心概念 定义 Store
04-25 1220
你可以定义任意多的 store，但为了让使用 pinia 的益处最大化 (比如允许构建工具自动进行代码分割以及 TypeScript 推断)，你应该在不同的文件中去定义 store。你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
博客
《Pinia实战》1. 介绍
04-25 826
我基于自己开发应用的经验，同时通过阅读其他人的代码，为使用 Pinia 的用户工作，以及在 Discord 上回答问题等方式验证了一些想法。与 Vuex 相比，Pinia 不仅提供了一个更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。现在 Pinia 已经成为推荐的状态管理解决方案，它和 Vue 生态系统中的其他核心库一样，都要经过 RFC 流程，它的 API 也已经进入稳定状态。Pinia 的官方课程是。
博客
《Vue Router实战教程》23.动态路由
04-11 541
它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。上面的例子有两个假设：第一，新添加的路由记录将与 to 位置相匹配，实际上导致与我们试图访问的位置不同。而在实际场景中，添加路由的行为更有可能发生在导航守卫之外，例如，当一个视图组件挂载时，它会注册新的路由。
博客
《Vue Router实战教程》22.导航故障
04-11 600
如果导航被阻止，导致用户停留在同一个页面上，由 router.push 返回的 Promise 的解析值将是 Navigation Failure。正如我们在一开始所说的，有不同的情况会导致导航的中止，所有这些情况都会导致不同的 Navigation Failure。Navigation Failure 是带有一些额外属性的 Error 实例，这些属性为我们提供了足够的信息，让我们知道哪些导航被阻止了以及为什么被阻止了。当在导航守卫中返回一个新的位置时，我们会触发一个新的导航，覆盖正在进行的导航。
博客
《Vue Router实战教程》21.扩展 RouterLink
04-11 595
RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// 如果使用 TypeScript，请添加 @ts-ignore。
博客
《Vue Router实战教程》20.路由懒加载
04-11 760
component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。如果你使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 正确地解析语法。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。// 或在路由定义里直接使用它。
博客
《Vue Router实战教程》19.滚动行为
04-11 760
要做到这一点，你可以返回一个 Promise，它可以返回所需的位置描述符。使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。我们可以将其与页面级过渡组件的事件挂钩，以使滚动行为与你的页面过渡很好地结合起来，但由于使用场景可能存在的差异和复杂性，我们只是提供了这个基础来实现特定的用户场景。如果返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动。// 始终滚动到顶部。
博客
《Vue Router实战教程》18.过渡动效
04-11 626
上面的用法会对所有的路由使用相同的过渡。Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡。幸运的是，可以添加一个 key 属性来强制过渡。我们可以添加一个 after navigation hook，根据路径的深度动态添加信息到 meta 字段。也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。-- 使用任何自定义过渡和回退到 `fade` -->Transition 的 API 在这里同样适用。-- 使用动态过渡名称 -->
博客
《Vue Router实战教程》17.命名路由
04-11 468
当在处理 KeepAlive 组件时，我们通常想要保持路由组件活跃，而不是 RouterView 本身。实践中通常不会这么做，因为这样会导致所有路由组件都使用相同的 props 和插槽。请查阅传递 props 给路由组件获取其他传递 props 的方式。而如果我们将引用放在 <router-view> 上，那引用将会被 RouterView 的实例填充，而不是路由组件本身。上面的代码等价于不带插槽的 <router-view />，但是当我们想要获得其他功能时，插槽提供了额外的扩展性。
博客
《Vue Router实战教程》16.组合式 API
04-11 927
请注意，在模板中我们仍然可以访问 $router 和 $route，所以如果你只在模板中使用这些对象的话，是不需要 useRouter 或 useRoute 的。Vue 的组合式 API 的引入开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。组合式 API 守卫也可以用在任何由 <router-view> 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。// 用在链接里的 href。// 导航至该链接的函数。
博客
《Vue Router实战教程》15.数据获取
04-11 742
当你使用这种方式时，我们会马上导航和渲染组件，然后在组件中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。// 用获取数据的工具函数 / API 包裹器替换 `getPost`// 用获取数据的工具函数 / API 包裹器替换 `getPost`// 侦听路由的参数，以便再次获取数据。// 侦听路由的参数，以便再次获取数据。
博客
《Vue Router实战教程》14.路由元信息
04-11 971
我们需要遍历这个数组来检查路由记录中的 meta 字段，但是 Vue Router 还为你提供了一个 route.meta 方法，它是一个非递归合并所有 meta 字段（从父字段到子字段）的方法。这意味着你可以简单地写。例如，根据上面的路由配置，/posts/new 这个 URL 将会匹配父路由记录 (path: '/posts') 以及子路由记录 (path: 'new')。// 这段可以直接添加到你的任何 `.ts` 文件中，例如 `router.ts`// 也可以添加到一个 `.d.ts` 文件中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值