Pinia 配合localStorage实现用户信息持久化

AI研思录2024-07-04 15:04:13

安装 Pinia

npm install pinia

main.js引入

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

创建文件

在 src 文件中，创建 store 文件，里面按模块创建js文件

store/user.js

import { defineStore } from 'pinia'
import { ref } from 'vue'


export const useUserStore = defineStore('userInfo', {
        // 类似于data
        state: () => {
            return {
                userInfo: null
            }
        },
        // 类似于methods
        actions: {
            setUserInfo(userInfo){
                this.userInfo = userInfo
            }
        }
    }
)

使用

由于我想使用pinia实现用户登录信息的管理，并使用localStorage实现持久化存储。

login.vue

<script>
    import background from '../assets/img/background-0625.png'
    import {useUserStore} from "../stores/user.js"
    import axios from 'axios'
    export default{
        data(){
            return{
                background,
                loginInfo:{
                    phone:"",
                    password:""
                }
            }
        },
        methods:{
            loginUser(){
                response = await axios.post('http://127.0.0.1:8000/user/login', this.loginInfo)

                if(response.data.code == 200){
                    // 登录成功后将用户信息存入pinia，实现组件间的变量共享
                    useUserStore().userInfo = response.data.data
                    // 同时存入localStorage做持久化缓存
                    localStorage.setItem("userInfo", JSON.stringify(response.data.data))
                    this.$router.push('/')
                }
            },
            onRegister(){
                this.$router.push('/register')
            }
        }
    }
  
</script>