安裝指令
npx nuxi@latest init <project-name, eg. Nuxt3Project>
進入專案目錄
cd Nuxt3Project
安裝專案資源
npm i
運行專案
npm run dev
這是 Nuxt3 官方推薦的工具,
指令會一次安裝 @pinia/nuxt
和 pinia
npx nuxi@latest module add pinia
export default defineNuxtConfig({
// ... other options
modules: [
// ...
'@pinia/nuxt',
],
})
確認工具安裝後未影響專案運行
npm run dev
建立 stores/auth.ts
,若目錄不存在就手動建立一個
interface UserData {
number: string
name: string
}
export const useAuthStore = defineStore('auth', {
state: ()=> ({
isLoggedIn: false,
user: null as UserData | null
}),
actions: {
login(userData: UserData) {
// fetch api ...
this.isLoggedIn = true,
this.user = userData
},
logout() {
this.isLoggedIn = false,
this.user = null
}
}
})
建立 pages/member/index.vue
,不需要 import { useAuthStore } from '@/stores/auth'
,即可使用 useAuthStore()
<template>
<div>
會員登入
<div>
手機 <input v-model='mobile' type='text' required>
</div>
<div>
<button v-on:click='handleLogin'>登入</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const mobile = ref('');
const authStore = useAuthStore()
const handleLogin = () => {
if (條件) {
authStore.login({mobile: mobile.value, name: '王大明'})
useRouter().push('/Member/profile') // 跳轉到會員資料頁
} else {
// 登入失敗
}
}
</script>
系列:
Nuxt 3 專案
上一篇:
下一篇:
Nuxt 3 專案
浮動選單遮蔽錨點定位位置 :root { scroll-padding-top: 120px; } 定位至錨點,捲動效果太硬 html { scroll-behavior: smooth; }
May 23, 2025輸出運行檔案的方式有兩種:SSR 模式檔案、SSG 模式檔案
Apr 28, 2025Azure service:
Mar 5, 2025接下來會使用到的 Azure service:
Mar 5, 2025or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up