Vue3+ts使用pinia传递数据,修改数据

本来是写的一个跳转页面的,需要同时传值,是两个毫不相干(A组件传到B组件)的组件,本来是用的params跳转的,但是官方已经修改了params跳转的传参的了,参数已经要显示在上方了,这是很致命的,咱们必然不能让客户看到这些参数!!

所以!我选择用pinia传值,还是用params跳转,我跳转的时候不传参就行了嘛,我要拿参数就去小菠萝里面拿不就行了吗(机智如我)

第一步:

在src下方的创建stores

第二步:

store中创建index.ts,在index.ts中写下面的代码:

import { createPinia } from 'pinia';

// 创建
const pinia = createPinia();

  
// 导出
export default pinia;

第三步:

同样在store中创建你所需要的名字的文件,我这里是叫newpagedata.ts

newpagedata.ts中的内容为:

import { defineStore } from 'pinia';

/**
 * 后端返回原始路由(未处理时)
 * @methods setCacheKeepAlive 设置接口原始路由数据
 */
export const useNewpageData = defineStore('newpagedata', {
	state: () => ({
		mid: 66,
		sp: 3,
		cz: 4,
		sd: 8
	}),

	getters: {

	},

	actions: {
		setmid(num: number) {
			this.mid = num
		},
		setsp(num: number) {
			this.sp = num
		},
		setcz(num: number) {
			this.cz = num
		},
		setsd(num: number) {
			this.sd = num
		}
	},
	 
});

在这里我要穿的参数是mid,sp,cz,sd,所以我给的state中的参数设置了这些,action中的方法是为了A组件传递实时数据

获取pinia中的数据:

B组件是接收数据的,代码如下:

// 首先需要引入一下我们刚刚创建的newpagedata
import {useNewpageData} from '/@/stores/newpagedata'
// 因为是个方法，所以我们得调用一下
const NewpageData = useNewpageData()
//直接就能获得你想要的数据
console.log(NewpageData.mid,"NewpageData.mid");

修改pinia中的数据:

在A组件中想把A组件的数据传递到pinia中,这样B组件才能实时的获得嘛(其中的miniValue,sp,cz,sd等等都是我设置的参数),代码如下:

<template>
   
   <el-button @click="routerJump(minivalue, sp, cz, sd)" type="primary">
开始轮播
</el-button>
               
</template>

// 首先需要引入一下我们创建的newpagedata
import {useNewpageData} from '/@/stores/newpagedata'
// 因为是个方法，所以我们得调用一下
const NewpageData = useNewpageData()

这个函数是上方button的点击事件,跳转的按钮,具体修改的地方因你们自己的项目而定
const routerJump = (minivalue: any, sp: number, cz: number, sd: any) => {
    NewpageData.setmid(minivalue)
    NewpageData.setsp(sp)
    NewpageData.setcz(cz)
    NewpageData.setsd(sd)
    if (minivalue.length <= 1) {
        ElMessage.error('请选择设备！');
        return
    }
    router.push({ name: 'newpage', params:{} })
}

以上就能修改pinia中的数据同时B组件也能得到试试修改的数据啦!