vue3+ts使用pinia在url隐藏传参，并解绝刷新之后参数丢失。

之前使用params传参会把参数显示在url上，这种做法不太安全用户非常轻松就能修改参数造成系统bug。上网浏览了很多大佬的文章自己研究出了一个办法来决绝。

首先创建一个stores文件夹

index.ts文件

import { createPinia } from 'pinia';

// 创建
const pinia = createPinia();

// 导出
export default pinia;

newpagedata.ts文件

1、actions是将接受到值存到localStorage里。（如果不存到localStorage里并且在url上同时不显示参数，页面会在刷新之后失去参数。存在localStorage里就可以解绝）

2、存到localStorage就是为了决绝页面刷新后参数失效，虽然存到localStorage也不安全但还是比直接在url显示好一些的。

import { defineStore } from 'pinia';

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

  getters: {},

  actions: {
    setmid(num: number) {
      this.mid = num;
      console.log(num);
      // 将更新后的 mid 值保存到 localStorage
      localStorage.setItem('mid', num.toString());
    },
    setsp(num: number) {
      this.sp = num;
      localStorage.setItem('sp', num.toString());
    },
    setcz(num: number) {
      this.cz = num;
      localStorage.setItem('cz', num.toString());
    },
    setsd(num: number) {
      this.sd = num;
      localStorage.setItem('sd', num.toString());
    },
  },
});

1.vue

这个页面传递参数

<template>
  <div>
    <button @click="routerJump">Click Me</button>
  </div>
</template>

<script setup lang="ts">
  // 首先需要引入一下我们创建的newpagedata
  import { useNewpageData } from '../../stores/newpagedata';
  import { useRouter } from 'vue-router';
  const NewpageData = useNewpageData();
  const router = useRouter();

  function routerJump() {
    NewpageData.setmid(1);
    NewpageData.setsp(2);
    NewpageData.setcz(3);
    NewpageData.setsd(4);
    console.log(NewpageData.mid);

    router.push({ name: 'result-info3', params: {} });
  }
</script>

3.vue

这个页面接受参数，直接从localStorage读取

<template>
  <div>
    <n-button type="tertiary"> test </n-button>
  </div>
</template>

<script setup lang="ts">
  // 首先需要引入一下我们刚刚创建的newpagedata
  import { useNewpageData } from '../../stores/newpagedata';
  import { useRoute } from 'vue-router';
  import { onMounted } from 'vue';

  const NewpageData = useNewpageData();
  const route = useRoute();

  const idParam = route;

  onMounted(async () => {
    console.log(NewpageData.mid, NewpageData.sp, NewpageData.cz, NewpageData.sd);
  });
</script>

代码是在大佬的基础上使用AI修改的，具体我也不太清除只知道实现方法并保证代码能跑。

前端新人，欢迎大哥们提出宝贵意见。