【VUE】状态管理：Pinia组件、Cookie组件
1.示例：使用Pinia管理用户状态信息，在各个组件中进行使用
index.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
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
<script setup></script><template><RouterView />
</template><style scoped>
</style>
LoginView.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
<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
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 = nullcookies.remove("info")userDict.value = null}return {userId, userName, userToken, doLogin, doLogout}
})
JSON.stringify：将一个 JavaScript 对象或值转换为 JSON 字符串
JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串，可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
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 对象。
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。