🔥 (#73) Nuxt 内容查询 #

August 2022

Hey!

这个夏天对我来说有点忙，我终于完成了所有的婚礼和旅行。

现在我有时间来继续输出 Vue 的内容。

在接下来的几个月里，我将有一些令人兴奋的事情 - 这将是史诗般的！

我现在真不能说太多。

是的，我还在缓慢更新 Clean Components，这是一个不同的项目。

你还要等等

现在，我们继续 Vue Tips 内容。

—Michael

p.s. If you love these newsletters I send out, please share it with a co-worker or friend who you think will also enjoy it! Thanks!

🔥 从写接口 Interface 入手 #

在编写可复用组件时候，不要立刻写代码实现它。

相反，花一些时间分析出你会用到的组件。花一些时间思考组件和应用之间的交互接口信息。

提前几分钟的准备，后续可以节省很多时间和风险。

开始之前你可以问自己几个问题：

1. 组件应该接收什么参数？
2. 你想包含什么选项？
3. 组件想返回什么？
4. 我们想要使用动态返回值吗？
5. 如何达到最小可用版本，如何快速实现？
6. 最终版本会什么样？我们能做哪些简单的准备？

当然，你的组件会随着发展发生变化。

但一开始就朝着正确的方向开始会更容易。

🔥 Nuxt 的内容查询 #

Nuxt Content 2 给我们带来了一种 queryContent 的方法查询内容：

// composables/useArticles.js

export default () =>
  queryContent("articles")
    .where({
      // 可选字段，可能为 true 或者不存在
      ghost: { $ne: true },
      newsletter: { $ne: true },
      // 不要渲染未来计划发布的文章
      date: { $lte: new Date() },
    })
    .only(["title", "path", "description", "date", "tags"])
    .sort({ date: -1 })
    .find();

在这段代码里，我给博客编写了一段可复用的逻辑 useArticles，可以抓取 content/articles 文件夹下的所有内容。

queryContent 函数是一段查询逻辑，展示了如何获取数据。我们接着看是如何使用它的。

首先，我们使用 where 语句来筛选出我们不希望出现的文章。有时候我会在发布网站之前添加一篇文章。

我设定了 date 条件筛选掉未来的日期，来获取今天之前的文章：

date: {
  $lte: new Date();
}

之后，有些文章是我每周的周刊内容，还有一些内容是想归入 articles 文件夹但还不想发布的内容。

我使用 frontmatter 字段来指定：

---
newsletter: true  # This is a newsletter
---

---
ghost: true  # 表示不想出现
---

第三步，我使用 only 语句来抓取我们所需要的字段。默认清空下，queryContent 方法会返回很多数据，包含了文章本身，返回的数据量太大了。

最后，我已经猜到了，使用 sort 语句来对文章进行日期排序。

queryContent 方法有更多选项，可以进一步阅读 文档。

📜 入门介绍 Vue3 中的 Script Setup #

在 Vue3 中使用 script setup 会减少书写的代码。

但和使用 setup 相比还是有一些不同。

Anthony Konstantinidis 写的文章介绍了所有你应该知道的 Vue3 script setup 细节。

进一步阅读：The 101 guide to Script Setup in Vue 3

💬 没有错误 #

"Testing can only prove the presence of bugs, not their absence." —Edsger W. Dijkstra

“测试只能证明存在 bug，而不是没有 bug。” —Edsger W. Dijkstra

🧠 间隔重复：我最喜欢的 Git 命令 #

想要长时间牢牢记住某些事情，最好方式就是定期回顾，逐渐增加回顾的间隔 👨‍🔬

实际上，记住这些 tips 比发呆有用得多，这是几周前的一个 tip 可以唤起你的记忆。

介绍一些我最喜欢的 git 命令，或许你也是如此：

我经常在不同分支之间切换，敲命令很麻烦：

# 切换到上一个分支
git checkout -

又是我添加了一些临时文件，但我发现不是真的需要他们：

# 移除所有没有被追踪的文件
git clean

或者搞乱了代码，需要重新开始：

# 撤销所有更改，回到上次提交
git reset --hard

Github 会获取 PR 分支上的提交，合并时候可以把他们合并到一条记录。或者想合并一个分支，但还没准备提 PR：

# 压缩所有提交到一条提交记录
git merge --squash <branch>
git commit

p.s. I also have two courses: Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-073-august-10/

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。