【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。