Nuxt3 仿掘金项目的记录(1) | 青训营

没用的啊k
258 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

关于本项目的一些技术问题

本节介绍一些在开发中遇到的一些技术问题(1)

数据获取

首先想到的就是axios，但是吧。之前在翻文档的时候看到了nuxt有自己的获取方式，使用useFetch或者是useAsyncData等的形式。在文档中也有提到Nuxt3有全局可用的Fetch方法。通过查阅一些资料，也有人说使用Fetch代替了axios。所以本项目一开始是首先确定使用Fetch，备用方案是使用axios。

image.png 在useFetch和useAsyncData中我选择了useAsyncData，在查阅资料的过程中有人说useAsyncData能够先从服务端将数据获取到客户端，再对比数据有没有差异，有差异就更新数据。我认为这种方式似乎更符合本项目的场景。况且useFetch是由useAsyncData封装来的。所以选择了useAsyncData。

接下来介绍一下如何应用useAsyncData。

在项目中，使用了两种方式。

一种是以server/api/xxxx.get.ts为中间层存储数据，再由页面useAsyncData获取数据的的形式。如下

async function getHeaderList () {
  const { data } = await useAsyncData('header', () => $fetch('/api/header'))
  if (data.value.data[0].attributes.show !== true) {
  }
  return data.value.data[0].attributes.headerTags
}
const headerList = await getHeaderList()

需要注意的是，这种形式获取的数据是ref形式的。

另一种是页面直接从接口中获取数据。

 const { data: article } = await useAsyncData(xx, () => $fetch(`${config.public.apiBase}/api/articles/xx`))
 // 这种形式后来被本项目淘汰了

考虑到项目后期或许会写中间层处理，于是使用了第一种形式。

暗亮模式

这部分是交给组长做的。大概是，nuxt3能够在composables目录中定义全局状态。就可以不用使用vuex。

使用了nuxt3提供的组件color-mode。此组件也是通过定义全局状态实现亮暗模式的。

Color-mode Module · Nuxt

image.png

安装

# yarn
yarn add --dev @nuxtjs/color-mode
# npm
npm install --save-dev @nuxtjs/color-mode
# pnpm
pnpm i --save-dev @nuxtjs/color-mode

使用

export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '-mode',
    storageKey: 'nuxt-color-mode'
  }
})

在要选择实现亮暗模式的组件中定义(.vue)，以本项目组件为例。

如图：

image.png

本项目使用了element-plus的el-switch组件。详细的el-switch设置参考Switch 开关 | Element Plus (gitee.io)

<template>
  <div>
    <transition name="fade">
      <el-switch
        v-model="$colorMode.preference"
        size="large"
        :class="{ 'dark': $colorMode.preference === 'light' }"
        class="fixed-ThemeSwitch"
        inline-prompt
        active-text="☀️"
        inactive-text="🌛"
        active-value="light"
        inactive-value="dark"
        style="--el-switch-on-color: #fff; --el-switch-off-color: #000;"
      />
    </transition>
  </div>
</template>
<script setup>
const colorMode = useColorMode()
console.log(colorMode.preference)
</script>

主要是v-model绑定$colorMode.preference。

其他设置参考官网Documentation · Nuxt Color Mode (nuxtjs.org)

当然，要是想要自己写暗亮模式也可以，毕竟能够定义状态

avatar
文章
阅读
粉丝