Vue3实现页面来回跳转的时候某个参数值不变,或者说实现参数共享

前情提要:主页面有个日期选择框,选择某个日期之后,从主页面点击超链接跳转到其他页面再返回的时候,日期又回到初始值而不是我选择的那个值,这就涉及到属性的状态管理即vuex,也是我们常说的store


关于vuex我这里不再赘述,感兴趣的小伙伴建议去官网了解:https://vuex.vuejs.org/zh/


针对上述具体的场景我们来简单实现一下参数状态的共享与同步:

  • 定义store库
    创建一个store.ts文件,在里面写入以下内容:
import { defineStore } from 'pinia';
export const Store = defineStore({id: 'Store', //为状态存储指定一个唯一的标识符// 定义我们要共享状态属性,info_date通过store实现在各个页面的共用state: () => ({info_date:new Date()}),// 在getters里面定义获取相关状态属性的方法getters:{getInfoDate(): any {return this.info_date;},},// 在actions里面提交我们的状态变更actions: {setInfoDate(value: any): any {this.info_date = value;},},
});
  • 主页面设置日期
<script lang="ts" setup>import { ref, watch } from 'vue';
import { Store } from './store';  //引入我们定义的storeconst theStore = Store();  // 创建store对象
// monthValue是日期框绑定的值
const monthValue = ref(theStore.info_date);  // 获取store里面的info_date的值,作为monthValue的初始化值// 监控monthValue值的变化,同步更新store里面info_date的状态
watch(monthValue,(newValue)=>{theStore.setInfoDate(newValue); //newValue是日期框选择的值,我们赋给store里面的info_date,这样其他页面获取的info_date是这里更新之后的值,达到了info_date共享的目的
}) </script>

注:

  • store里面属性的使用如上述所见:store对象.属性,比如theStore.info_date,其他页面使用同理
  • store里面属性的状态更新如上述所示:theStore.setInfoDate(新值),其他页面更新同理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/828910.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【R语言简介】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

小程序AI智能名片S2B2C商城系统:实现分销模式的四大要件深度解析

在当前的电商领域&#xff0c;小程序AI智能名片S2B2C商城系统正以其独特的分销模式&#xff0c;引领着行业创新的风潮。这种模式的成功&#xff0c;离不开四大核心要件&#xff1a;商品、机制、平台和运营。接下来&#xff0c;我们将对这四大要件进行深度解析。 首先&#xff0…

直播美颜SDK工具解析:揭秘实时视频美颜处理技术

今天&#xff0c;小编将与大家共同探讨直播美颜SDK工具背后的实时视频美颜处理技术&#xff0c;揭秘其原理和工作机制。 一、美颜算法的发展 在美颜算法的发展过程中&#xff0c;深度学习技术的应用起到了至关重要的作用。经过大量、多次的不断重复训练&#xff0c;美颜的算法…

pycharm编辑器------快捷键

pycharm编辑器基础快捷键 上下文操作 01PyCharm 有数百个上下文相关操作&#xff0c;可以帮助您转换、改进和修正代码。按 AIt Enter 以调用“显示上下文操作"。 02我们来应用第一个快速修复:移除形参。 03您几乎可以在任何上下文中调用"显示上下文操作"。我们…

springboot实现gpt的eventstream案例

springboot实现gpt的eventstream案例 一、maven坐标 引入webflux依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId></dependency>二、democontroller package org.e…

如何利用交易形态的失败进行现货黄金?

进行现货黄金理财&#xff0c;除了需要投资者对黄金投资有热情之外&#xff0c;有方法也是很重要的&#xff0c;光有热情而没有技术&#xff0c;我们的资金很可能会成为其他人的囊中之物。但如果有了现货黄金理财的技术&#xff0c;情况就可能扭转过来。下面我们就从买入的角度…

分享基于鸿蒙OpenHarmony的Unity团结引擎应用开发赛

该赛题旨在鼓励更多开发者基于OpenHarmony4.x版本&#xff0c;使用团结引擎创造出精彩的游戏与应用。本次大赛分为“创新游戏”与“创新3D 化应用”两大赛道&#xff0c;每赛道又分“大众组”与“高校组”&#xff0c;让不同背景的开发者同台竞技。无论你是游戏开发者&#xff…

数据库并发控制思维导图+大纲笔记

思维导图 大纲笔记 多用户数据库系统 定义 允许多个用户同时使用的数据库系统特点 在同一时刻并发运行的事务数可达数百上千个多事务执行方式 事务串行执行交叉并发方式 单处理机系统同时并发方式 多处理机系统事务并发执行带来的问题 产生多个事务同时存取同一数据的情况可能…

本地生活服务平台哪家强,怎么申请成为服务商?

当下&#xff0c;本地生活服务已经成为了多家互联网大厂布局的重要板块&#xff0c;在巨大的市场需求和强大的资本加持下&#xff0c;不少人都看到了本地生活服务平台广阔的前景和收益空间。在此背景下&#xff0c;许多普通人都跃跃欲试&#xff0c;想要成为本地生活服务商&…

Android --- SharedPreferences

SharedPreferences 对应sp文件的接口 使用 SharedPreferences API可以保存的相对较小键值对集合。SharedPreferences 对象指向包含键值对的文件&#xff0c;并提供读写这些键值对的简单方法。每个 SharedPreferences 文件均由框架进行管理&#xff0c;可以是私有文件&#xff…

Golang | Leetcode Golang题解之第52题N皇后II

题目&#xff1a; 题解&#xff1a; func totalNQueens(n int) (ans int) {columns : make([]bool, n) // 列上是否有皇后diagonals1 : make([]bool, 2*n-1) // 左上到右下是否有皇后diagonals2 : make([]bool, 2*n-1) // 右上到左下是否有皇后var backtrack func(int)…

多线程(安全 同步 线程池)

线程安全问题 多线程给我们的程序带来了很大性能上的提升&#xff0c;但是也可能引发线程安全问题线程安全问题指的是当多个线程同时操作同一个共享资源的时候&#xff0c;可能会出现的操作结果不符预期问题 取钱的线程安全问题 线程安全问题出现的原因&#xff1f; 存在多线…

JAVA实现easyExcel动态生成excel

添加pom依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.6</version> </dependency><!--工具类--> <dependency><groupId>cn.hutool</groupId><…

OSPF的协议特性

路由汇总的概念 l 路由汇总&#xff08; Route Aggregation &#xff09;&#xff0c;又称路由聚合&#xff08;Route Summarization&#xff09;&#xff0c;指的是把一组明细路由汇聚成一条汇总路由条目的操作 l 路由汇总能够减少路由条目数量、减小路由表规模&#xff0…

Linux-进程和计划任务管理⭐

目录 一、程序和进程 1.程序 2.进程 3.线程与进程 二、ps查看静态进程信息 1.ps aux 命令 2.ps-静态查看系统进程 3.ps -elf 三、top-查看进程动态信息 四、pgrep查看进程信息 五、pstree-查看进程树 六、控制进程 1.进程启动方式 2.调度启动 3.进程的前后台调…

LeetCode //C - 38. Count and Say Medium Topics Companies

38. Count and Say The count-and-say sequence is a sequence of digit strings defined by the recursive formula: countAndSay(1) “1”countAndSay(n) is the way you would “say” the digit string from countAndSay(n-1), which is then converted into a differen…

Laravel 6 - 第十七章 配置数据库

​ 文章目录 Laravel 6 - 第一章 简介 Laravel 6 - 第二章 项目搭建 Laravel 6 - 第三章 文件夹结构 Laravel 6 - 第四章 生命周期 Laravel 6 - 第五章 控制反转和依赖注入 Laravel 6 - 第六章 服务容器 Laravel 6 - 第七章 服务提供者 Laravel 6 - 第八章 门面 Laravel 6 - …

《动手学深度学习(Pytorch版)》Task01:初识深度学习——4.22打卡

《动手学深度学习&#xff08;Pytorch版&#xff09;》Task01&#xff1a;初识深度学习 深度学习介绍AI地图深度学习任务图片分类物体检测和分割样式迁移人脸合成文字生成图片文字生成无人驾驶 案例&#xff1a;广告点击完整过程 QAQ&#xff1a;机器学习的可解释性&#xff1a…

【C++ STL序列容器】list 双向链表

文章目录 【 1. 基本原理 】【 2. list 的创建 】2.1 创建1个空的 list2.2 创建一个包含 n 个元素的 list&#xff08;默认值&#xff09;2.3 创建一个包含 n 个元素的 list&#xff08;赋初值&#xff09;2.4 通过1个 list 初始化另一个 list2.5 拷贝其他类型容器的指定元素创…

swagger文档接口根据包分组配置

文章目录 一、引言二、配置2.1 原本配置及效果2.2 更改后配置及效果 三、结束 一、引言 关于接口文档的详细配置可参见文章API文档生成工具-----Knife4j的详细介绍、配置及应用 此文章是基于已经完成基础配置的前提下,如何根据不同包进行分组 二、配置 2.1 原本配置及效果 …