首页 > 其他分享 >vue3 门户网站搭建3-pinia

vue3 门户网站搭建3-pinia

时间:2023-02-22 11:14:29浏览次数:37  
标签:界面 门户网站 vue3 参数 pinia 跳转

引入 pinia 来方便处理全局变量。

  npm install pinia

 

1、创建 pinia

 

2、main 中引入(我这里是直接写的 index,所以导出的是 stores)

 

3、定义变量

 使用:

 

注:

开发门户项目过程中,遇到了多个路由使用复用同一个页面的情况,内容显示标题为跳转携带参数传递,但一刷新界面,参数丢失就导致界面内容为空,故调整为用 pinia 记录跳转参数以避免参数丢失。

另因为标题是传参显示,故切换界面语言时,并不能实时刷新,所以增加了监听使用:

标签:界面,门户网站,vue3,参数,pinia,跳转
From: https://www.cnblogs.com/guofan/p/17130696.html

相关文章

  • vue2、vue3安装vue-devtools详细版教程
    在使用Vue时,我们推荐在浏览器上安装VueDevtools。VueDevtools是Vue官方发布的调试浏览器插件,可以安装在Chrome和Firefox等浏览器上,直接内嵌在开发者工具中,使用......
  • vue3 + ts
    安装#Vite需要Node.js版本>=12.0.0npminitvite@latest#根据相关问题进行回答#需要选择框架以及使用语言配置项目名#进入项目目录cdvite-project#......
  • vue3 vite异步组件路由懒加载
    引言在Vue2中,异步组件和路由懒加载处理使用import就可以很轻松实现。但是在Vue3.x中异步组件的使用与Vue2.x完全不同了。本文就详细讲讲vue3中异步组件和路由懒......
  • 直播软件搭建,vue3 页面回到顶部(平缓滚动效果)
    直播软件搭建,vue3页面回到顶部(平缓滚动效果) common.js //页面回到顶部(滚动效果)exportconsthandleScroll=()=>{  letscrollTop=window.pageYOffset||d......
  • vue3 setup echarts5 绘制图表
    vue3<divref="chartRef1"style="width:100%;height:100%"/><scriptsetuplang="ts">importtype{ECharts,EChartsOption}from"echarts";import{init......
  • Spring Boot&Vue3 前后端分离实战wiki 知识库系统<一>---Spring Boot项目搭建
    前言:接下来又得被迫开启新的一门课程的学习了,上半年末尾淘汰又即将拉开序幕【已经记不清经历过多少次考试了】,需要去学习其它领域的技术作为考试内容,我选了springboot相关......
  • Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<二>---后端架构完善与接口开发
    数据库准备:在上一次https://www.cnblogs.com/webor2006/p/17114996.html已经将SpringBoot相关的配置环境给搭建好了,接下来则需要为咱们的项目创建一个数据库。1、mysql的......
  • Vue3 - defineProps 设置默认值
    在TS中,仅类型声明的一个缺点defineProps是它无法为props提供默认值。为了解决这个问题,withDefaults还提供了一个编译器宏,同时给出JS默认值的写法<scriptsetuplang="ts......
  • vue3 门户网站搭建2-ngnix
    路由配好了,需要调试下build后是否可用,这时我们需要一个服务端来运行静态网页。官网直接下载一个windows版本的ngnix即可:http://nginx.org/en/download.html 下......
  • Vue3之v-show不能放置于自定义组件
    控制台警告Runtimedirectiveusedoncomponentwithnon-elementrootnode.Thedirectiveswillnotfunctionasintended.原因意思是自定义指令不能放到组件上,而......