vue3 学习笔记06 -- pinia的简单使用

vue3 学习笔记06 – pinia的简单使用

使用 Pinia 的步骤可以分为安装和配置 Pinia、创建和封装 store 以及在组件中使用 store。

安装依赖

npm install pinia@next

引入

1. 在main.ts中直接引入pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

2. 单独开个 .ts 文件引入pinia，在main.ts中引入

import { createApp } from 'vue'
import { setupStore } from "@/stores";
const app = createApp(App)
setupStore(app);
app.mount('#app')

创建和配置 Pinia Store

• 在 src 目录下创建一个 stores 文件夹，并在其中创建 Pinia 的 store。
  • 创建一个 src/stores/index.ts

     import type { App } from 'vue'
    import { createPinia } from 'pinia'
    
    const store = createPinia()
    
    // 全局注册 store
    export function setupStore(app: App<Element>) {
      app.use(store)
    }
    
    export { store }
    
    
    

  • 创建一个 src/stores/user.ts

        import { defineStore } from 'pinia'
        import { getUserInfo } from '@/api/user/user'
        import { store } from './index'
    
        export const useUserStore = defineStore('user', () => {
            const user = {
                token: '',
                userId: '',
                info: {}
            }
            function setToken(token: string) {
                user.token = token
            }
            function setUserId(id: number | string) {
                user.userId = id
            }
            function setInfo(info: object) {
                user.info = info
            }
            function handleGetUserInfo() {
                return new Promise((resolve, reject) => {
                    // 登录时存在session中的用户信息
                let { userId } = sessionStorage.userInfo ? JSON.parse(sessionStorage.userInfo) : {}
                getUserInfo({ id: userId })
                    .then((res) => {
                        let data = res || {}
                        user.info = data
                        // 获取到用户权限及详细信息
                        resolve()
                    })
                    .catch((error) => {
                        console.log(error, 'error')
                        reject(error)
                    })
                })
            }
            
            return { user, handleGetUserInfo,setToken, setUserId, setInfo }
        })
        export function useUserStoreHook() {
          return useUserStore(store)
        }
    

在组件中使用 Pinia Store

<template>
 form表单.....
<el-button class="login-button" type="primary" @click="handleLogin" :loading="loading"
        >登录</el-button
      >
</template> 
<script setup lang="ts">
import { login } from '@/api/login/login'
import { useRouter } from 'vue-router'
import { useUserStoreHook } from '@/stores/user'
let loading = ref(false)
const router = useRouter()
const userStore = useUserStoreHook()
const handleLogin = ()=>{
    let data = {
        username:'xxx',
        password:'xxx'
    }
    // 存储toekn及id到store中
    userStore.setToken(token)
    userStore.setUserId(userId)
    loading.value = true
    login(data).then((res)=>{
        loading.value = false
        // 一些存储token及其他信息的处理的处理
        ....要干的事
        router.push('/')
    })
}
</script>  

在导航守卫中使用

• src/permission/index.ts

import router from '@/router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { useUserStoreHook } from '@/stores/user'
const whiteList = ['/login']
const userStore = useUserStoreHook()
NProgress.configure({ showSpinner: false }) // 进度条
router.beforeEach(async (to, form, next) => {
  NProgress.start()
  // 判断是否有token
  if (userStore.user.token) {
    if (to.path == '/login') {
      next()
      NProgress.done()
    } else {
        try{
            next()
            NProgress.done()
        } catch (error) {
          next(`/login`)
          NProgress.done()
        }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
      NProgress.done()
    } else {
      next(`/login`)
      NProgress.done()
    }
  }
})