Pinia 使用方法，配合localStorage实现存储用户信息

什么是 Pinia

Pinia 是 Vue.js 应用程序的一个现代化的状态管理库，它用于集中管理和共享组件之间的数据，state、getter、和 action 是构建状态管理的核心概念，它们分别对应数据存储、计算属性和操作方法。

使用方法

安装

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>