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

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。

相关推荐
Watermelo6177 分钟前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248949 分钟前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_7482356120 分钟前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink5 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-7 小时前
验证码机制
前端·后端
燃先生._.8 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖9 小时前
[react]searchParams转普通对象
开发语言·前端·javascript