八 · 从零开始搭建一个项目(添加pinia并且完善登陆与注册)

1.安装 pinia

 yarn add pinia

2.初始化 pinia

src -> 新建 store目录 -> index.ts

import type { App } from 'vue'
import { createPinia } from 'pinia'

const store = createPinia()

export const setupStore = (app: App<Element>) => {
    app.use(store)
}

export { store }

3.在main里调用这个函数把app传进去注册就好

4.store -> 新建 modules 目录 -> userStore.ts 与 authStore.ts

userStore

authStore

5.src -> 新建types -> AuthType.ts

6.由于没有后端所以我们用将用户列表存到本地的方式实现注册登陆

封装一个本地存储读取

7.编写注册的事件

因为我们希望他注册后直接登陆

8.注册页面直接在验证后使用

9.启动项目非常成功

10.编写退出登陆(直接调用这个事件)

注: 不需要删除用户名

// 登出 x
const logout = async () => {
    const username = getLocalStore(currentUser)
    removeLocalStore(currentUser)
    removeLocalStore(username)
    await push('/login')
}

// 登出 √
const logout = async () => {
    removeLocalStore(currentUser)
    await push('/login')
}

忽略图片里的这个问题改掉

11.编写登陆

登陆逻辑

修改完类型直接使用登陆