【VUE】状态管理：Pinia组件、Cookie组件

南瓜啊2024-09-27 22:57

1.示例：使用Pinia管理用户状态信息，在各个组件中进行使用

index.js

js 复制代码 
import { createRouter, createWebHistory } from 'vue-router'
import {userInfoStore} from "@/stores/user.js";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/LoginView.vue')
    },
    {
      path: '/admin',
      name: 'admin',
      component: () => import('../views/AdminView.vue'),
      children: [
        {
          path: "",
          redirect: {name: "mine"}
        },
        {
          path: "mine",
          name: "mine",
          component: () => import('../views/MineView.vue')
        },
        {
          path: "order",
          name: "order",
          component: () => import('../views/OrderView.vue')
        }
      ]
    }
  ]
})
router.beforeEach(function (to,from,next) {
  // 1.访问登录页面，不需要登录就可以直接去查看
  if (to.name === "login") {
    next()
    return
  }
  // 2.检查用户登录状态，登录成功，继续往后走next();未登录，跳转至登录页面
  // let username = localStorage.getItem("name")
  const store = userInfoStore()
  if (!store.userId){
    next({name:"login"})
    return;
  }
  // 3.登录成功且获取到用户信息，继续向后访问
  next()
})
export default router

store/user.js

js 复制代码 
import {ref, computed} from 'vue'
import {defineStore} from 'pinia'

export const userInfoStore = defineStore('userInfo', () => {
    const userString = ref(localStorage.getItem("info"))
    const userDict = computed(() => userString.value ? JSON.parse(userString.value) : null)
    const userId = computed(() => userDict.value ? userDict.value.id : null)
    const userName = computed(() => userDict.value ? userDict.value.name : null)
    const userToken = computed(() => userString.value ? userDict.value.token : null)

    function doLogin(info) {
        localStorage.setItem("info", JSON.stringify(info))
        userString.value = JSON.stringify(info)
    }
    function doLogout(){
        localStorage.clear()
        userString.value = null
    }

    return {userId, userName, userToken, doLogin, doLogout}
})

App.vue

vue 复制代码 
<script setup>

</script>

<template>
  <RouterView />
</template>

<style scoped>
</style>

LoginView.vue

vue 复制代码 
<template>
  <div class="box">
    <p>
      用户名：
      <input type="text" placeholder="用户名" v-model="msg.username">
    </p>
    <p>
      密码：
      <input type="text" placeholder="密码" v-model="msg.password">
    </p>
    <p>
      <button @click="doLogin">登录</button>
    </p>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {userInfoStore} from "@/stores/user.js";

const msg = ref({
  username: "",
  password: ""
})
const router = useRouter()
const store = userInfoStore()

const doLogin = function () {
  // 1、获取数据
  console.log(msg.value)
  // 2、发送网络请求
  // 3、本地存储用户信息（登录凭证）
  // localStorage.setItem("name", msg.value.username)
  let info = {id:1, name: msg.value.username, token: "ddsafhsjdfkj"}
  store.doLogin(info)
  // 3、跳转到首页
  router.push({name:"mine"})
}

</script>

<style scoped>
.box {
  width: 300px;
  margin: 100px auto;
}
</style>

AdminView.vue

vue 复制代码 
<template>
  <div class="page-header">
    <div class="container">
      <RouterLink to="/admin/mine">我的</RouterLink>
      |
      <RouterLink to="/admin/order">订单</RouterLink>
      <div style="float:right;">
        <a>{{store.userName}}</a>
        <a @click="doLogout">退出1</a>
      </div>
    </div>
  </div>
  <div class="container">
    <RouterView/>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {userInfoStore} from "@/stores/user.js";

const router = useRouter()
const store = userInfoStore()

function doLogout() {
  store.doLogout()
  router.push({name: "login"})
}
</script>

<style scoped>
body {
  margin: 0;
}

.page-header {
  height: 48px;
  background-color: cornflowerblue;
  line-height: 48px;
}

.page-header a {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}

.container {
  width: 980px;
  margin: 0 auto;
}

</style>

JS中，const let var的用法区别是什么？

  • var：
    • 变量提升（即：先引用后声明）
    • 可多次声明，后一次会覆盖前一次
    • 函数内部声明，则为局部变量
    • 函数外部声明，则为全局变量
  • let：
    • 未声明前不可使用
    • 相同作用域内仅可声明一次
  • const：
    • 初始化的时候必须赋值
    • 常量：声明后的的值不可更改
    • 变量：声明后的指向的内存地址不能更改，但内存地址中的数据可以更改

https://blog.csdn.net/xiewenhui111/article/details/113133330

2. cookie组件

  • sudo npm i vue3-cookies
  • main.js
    • import VueCookies from "vue3-cookies";
    • app.use(VueCookies);
  • 其他地方
    • import {useCookies} from "vue3-cookies";
    • const {cookies} = useCookies()
    • cookies.set(key, value, 有效期)
    • cookies.get(key)
    • cookies.remove(key)

stores/user.js

js 复制代码 
import {ref, computed} from 'vue'
import {defineStore} from 'pinia'
import {useCookies} from "vue3-cookies";

const {cookies} = useCookies()

export const userInfoStore = defineStore('userInfo', () => {
    // const userString = ref(localStorage.getItem("info"))
    // const userDict = computed(() => userString.value ? JSON.parse(userString.value) : null)

    const userDict = ref(cookies.get("info"))
    const userId = computed(() => userDict.value ? userDict.value.id : null)
    const userName = computed(() => userDict.value ? userDict.value.name : null)
    const userToken = computed(() => userDict.value ? userDict.value.token : null)

    function doLogin(info) {
        // localStorage.setItem("info", JSON.stringify(info))
        // userString.value = JSON.stringify(info)
        cookies.set("info", JSON.stringify(info), 10)
        userDict.value = info
    }

    function doLogout() {
        // localStorage.clear()
        // userString.value = null
        cookies.remove("info")
        userDict.value = null
    }

    return {userId, userName, userToken, doLogin, doLogout}
})

JSON.stringify：将一个 JavaScript 对象或值转换为 JSON 字符串

JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串，可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

js 复制代码 
JSON.stringify({ x: 1, y: 2 });
// "{"x":1,"y":2}"
JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] })
// "{"x":[10,null,null,null]}"

JSON.parse：将字符串转换为 JavaScript 对象

JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串，可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

js 复制代码 
const json = '{"result":true, "count":2}';
const obj = JSON.parse(json);
console.log(obj.count);
// 2
console.log(obj.result);
// true

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON教程：https://www.runoob.com/json/json-syntax.html

JSON对象

复制代码 
{ "name":"runoob", "alexa":10000, "site":null }
  • JSON 对象使用在大括号 {...} 中书写。
  • 对象可以包含多个 key/value（键/值）对。
  • key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
  • key 和 value 中使用冒号 : 分割。
  • 每个 key/value 对使用逗号 , 分割。

JSON数组

复制代码 
[ "Google", "Runoob", "Taobao" ]
  • JSON 数组在中括号中书写。
  • 中括号 [] 保存的数组是值（value）的有序集合。一个数组以左中括号 [ 开始， 右中括号 ] 结束，值之间使用逗号 , 分隔。
  • JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
  • JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。
相关推荐
百万蹄蹄向前冲5 分钟前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳58144 分钟前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路1 小时前
GeoTools 读取影像元数据
前端
ssshooter1 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友1 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry2 小时前
Jetpack Compose 中的状态
前端
dae bal3 小时前
关于RSA和AES加密
前端·vue.js
柳杉3 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog3 小时前
低端设备加载webp ANR
前端·算法
LKAI.3 小时前
传统方式部署（RuoYi-Cloud）微服务
java·linux·前端·后端·微服务·node.js·ruoyi
热门推荐
01UV安装并设置国内源02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03KGG转MP3工具|非KGM文件|解密音频04【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10TRAE Rules 实践：为项目配置 6A 工作流