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

什么是 Pinia

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

使用方法

安装

npminstall 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>