当前位置:首页 » 《资源分享》 » 正文

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

5 人参与  2024年09月30日 08:00  分类 : 《资源分享》  评论

点击全文阅读


什么是 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>

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/166461.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 厉总,夫人带三崽杀回来了(厉景深苏晚晴)全书免费_(厉景深苏晚晴)厉总,夫人带三崽杀回来了后续(厉景深苏晚晴)
  • 为了给侄子治病,老公害我流产七次更新_陆寒川陆总林瑾无错版_小说后续在线阅读_无删减免费完结_
  • 填错志愿后,我成了活神仙章节目录_顾言姜澈林晓晓优质全文_小说后续在线阅读_无删减免费完结_
  • 沈亦初秦景泽后续(以后,她都不要再喜欢他了)(沈亦初秦景泽)整本畅享在线+无广告结局
  • 独家猎户夫君你轻点宠小说(云柔苏安)(猎户夫君你轻点宠)电子书畅享阅读
  • 全网首发容止洛云曦小说叫什么(他死后女帝火葬场了)(容止洛云曦)全书阅读纯净阅读
  • 周砚川战景熙小说章节目录+序章(离婚后,保镖前夫他成了财阀大佬)全书畅享在线
  • 碎骨惨死后,我与宿敌联手弑夫证道特别篇章节目录+章节前文(齐南韵柳苑云)TXT清爽版在线
  • 重生八零年代点天灯后,崇洋***的养妹疯了章节目录_肖颖芝江天肖星苒书荒_小说后续在线阅读_无删减免费完结_
  • 最新章节(姜小九徐琛)霸婚总裁小蛮妻:结局+番外精品选集附加章节列表
  • 死后十年,妈妈收到我的死亡通知高口碑_妹妹爸爸妈妈大丫隐藏剧情_小说后续在线阅读_无删减免费完结_
  • 邻居连续偷菜93天小说(林婉清顾星河)章节目录+起点章节(邻居连续偷菜93天)全篇清爽版在线

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1