Vue的路由守卫与Store

embedded/2024/9/22 13:04:36/

路由守卫

全局路由守卫

router.beforeEach((to, from, next) => {console.log("去哪:", to, "那来:", from);// sessionStorage.getItem()//是否运行放行next();
})
//后置路由守卫
router.afterEach((to, from)=>{console.log("后置路由守卫:去哪:", to, "那来:", from);
})

独享路由守卫

beforeEnter: (to: any, from: any, next: any) => {
console.log("独享路由守卫:去哪:", to, "那来:", from);
//是否放行
next();
}

组件路由守卫

<script lang="ts">
export default {name: "Detail",beforeRouteEnter(to, from) {console.log("在渲染该组件的对应路由被验证前调用")// 不能获取组件实例 `this` !// 因为当守卫执行时,组件实例还没被创建!}
}
</script>
//组件路由守卫
onBeforeRouteUpdate((to, from) => {// console.log(to,from)console.log("当前路由被改变,如果同一个路径,但是参数不同 也可以重复触发");
})onBeforeRouteLeave((to, from, next) => {console.log("通过路由规则,离开该组件时被调用:", to, from);//是否允许 离开next();
})

Pinia

Pinia 起始于 2019 年 11 月左右的一次实验,其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起,我们就倾向于同时支持 Vue 2 和 Vue 3,并且不强制要求开发者使用组合式 API,我们的初心至今没有改变。除了安装SSR 两章之外,其余章节中提到的 API 均支持 Vue 2 和 Vue 3。虽然本文档主要是面向 Vue 3 的用户,但在必要时会标注出 Vue 2 的内容,因此 Vue 2 和 Vue 3 的用户都可以阅读本文档。

安装:npm install pinia

配置:src/main.ts

//引入 pinia 的 createPinia 创建 pinia
import {createPinia} from "pinia";//创建 pinia实例
const pinia = createPinia();//载入pinia到vue中
app.use(pinia);

使用:

准备案例

Count.vue<template><div class="count"><h2>当前求和为:{{ sum }}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">+</button><button @click="minus">-</button></div>
</template><script setup lang="ts" name="Count">
import {ref} from "vue";//当前求和
let sum = ref(1);
//当前用户选择的数字
let n = ref(1);
const add = () => {sum.value += n.value;
}
const minus = () => {sum.value -= n.value;
}</script><style scoped lang="css">
.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;
}select, button {margin: 0 5px;height: 25px;
}</style>Joke.vue<template><button @click="getJoke">获取笑话</button><div class="joke" v-for="joke in jokeList" :key="joke.id">{{ joke.title }}<br/>{{ joke.content }}</div></template><script setup lang="ts" name="Joke">
import {reactive} from "vue";
import axios from "axios";let jokeList = reactive([]);const getJoke = async () => {let {data: {data: {content, title, id}}} = await axios.get("https://api.vvhan.com/api/text/joke?type=json");console.log(content, title, id)jokeList.unshift({id, title, content});
}
</script><style scoped>.joke {margin-top:20px ;background-color: orange;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;
}
</style>

存储 + 读取数据

1.Store 是一个保存:状态、业务逻辑的实体,每个组件都可以读取、写入它。

它有三个概念:

state action getter 想等于组件中的:

data methods computed

1.创建Store配置文件

src/store/count.ts

import {defineStore} from 'pinia'//创建并暴露 一个 Store
export const useCountStore = defineStore('count', {//状态state() {return {sum: 8,school: '猿究院',address: "北大街"}},//动作actions: {//定义方法  加increment(value: number) {// 定义业务逻辑if (this.sum < 10) {this.sum += value;}},decrement(value: number) {if (this.sum > 1) {this.sum -= value;}},changeData(sum: number, address: string) {this.sum = sum;this.address = address;}},//计算getters: {}
})

storeToRefs

作用:借用storeToRefs将store中的数据转换为ref对象,方便在模板中使用。

注意:

pinia提供storeToRefs只会将数据转换,而Vue的toRefs会转换store中的数据。

import {storeToRefs} from "pinia";const jokeStore = useJokeStore()let {jokeList} = storeToRefs(jokeStore);<div class="joke" v-for="joke in jokeList" :key="joke.id">{{ joke.title }}<br/>{{ joke.content }}</div>

getters

当state中的数据 ,需要经过处理在使用时,可以使用getters配置

//计算
getters: {bigSum: (state): number => state.sum * 10
}使用
countStore.bigSum
let {bigSum} = storeToRefs(countStore);

$subscribe

通过 store的$subscribe() 方法侦听state的改变。

jokeStore.$subscribe((mutation, state) => {console.log("$subscribe",mutation, state);
})

store组合式写法

import {defineStore} from "pinia";
import {reactive} from "vue";
import axios from "axios";export const useTalkStore = defineStore("talk", () => {const jokeList = reactive([]);async function getJoke() {let {data: {data: {content, title, id}}} = await axios.get("https://api.vvhan.com/api/text/joke?type=json");console.log(content, title, id)jokeList.unshift({id, title, content});}return {jokeList, getJoke}
});使用 
// store 组合式写法
import {useTalkStore} from "@/store/joke2";const talkStore = useTalkStore()talkStore.getJoke()console.log("talkStore :",talkStore.jokeList)

http://www.ppmy.cn/embedded/113481.html

相关文章

MAVEN创建WEB项目

测试使用MAVEN创建WEB项目 创建项目 项目右击-> new-module 因为我们要创建web项目&#xff0c;所以Archetype选择webapp 创建后可以看到pom.xml文件中 打包方式为war包&#xff1b; 运行Web项目 安装tomcat&#xff0c;参考&#xff1a;maven安装依赖-CSDN博客 执行结…

家电制造的隐形守护者:矫平机确保材料完美无瑕

在家电制造业中&#xff0c;产品的美观和耐用性是消费者选择的关键因素。然而&#xff0c;在生产过程中&#xff0c;材料的翘曲问题往往成为影响产品质量的隐形杀手。幸运的是&#xff0c;矫平机的出现&#xff0c;为家电制造商提供了一个有效的解决方案&#xff0c;确保每一件…

如何在微信小程序中实现WebSocket连接

微信小程序作为一种全新的应用形态&#xff0c;凭借其便捷性、易用性受到了广大用户的喜爱。在实际开发过程中&#xff0c;实时通信功能是很多小程序必备的需求。WebSocket作为一种在单个TCP连接上进行全双工通信的协议&#xff0c;能够实现客户端与服务器之间的实时通信。本文…

“更上几层楼”的编程软件

在日益繁忙的工作环境中&#xff0c;选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度&#xff0c;甚至让团队协作更加顺畅。那么&#xff0c;哪款编程工具让你的工作效率翻倍&#xff1f;是智能的代码编辑器…

【乐企】调用工具类实现

本文主要是调用工具类的实现 直接看代码吧 1、工具类实现 import cn.hutool.http.HttpRequest; import com.alibaba.fastjson.JSON

算法手撕面经系列(1)--手撕多头注意力机制

多头注意力机制 一个简单的多头注意力模块可以分解为以下几个步骤&#xff1a; 先不分多头&#xff0c;对输入张量分别做变换&#xff0c;得到 Q , K , V Q,K,V Q,K,V对得到的 Q , K , V Q,K,V Q,K,V按头的个数进行split&#xff1b;用 Q , K Q,K Q,K计算向量点积考虑是否要添…

2024.9.17 Python

1.现有字典 d{‘a’:24&#xff0c;’g’:52&#xff0c;’l’:12&#xff0c;’k’:33}请按字 典中的 value值进行排序&#xff1f; sorted(d.items()&#xff0c;key lambda x:x[1]) [1]换成0即可变成按照键排序 2.del 列表名[index]&#xff1a;删除指定索引的数据 3.列表名…

Oozie

Oozie 是 Apache Hadoop 生态系统中的一个工作流调度和协调框架&#xff0c;用于管理和执行定时的 Hadoop 任务。它允许用户定义复杂的工作流来协调多个不同的 Hadoop 任务&#xff08;如 MapReduce、Hive、Pig 等&#xff09;的执行&#xff0c;并支持任务间的依赖关系。Oozie…