由vue-router页面传参时params丢失到pina的持久化

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

因为现在项目中不让用弹窗，新增/编辑什么的都是跳到新的页面，所以以前那种table列表查询直接带数据到弹窗中就不可以用，but，有人说了，那可以在路由跳转的时候把数据带过去啊，听我细说，

1. 首先 使用query带过去的话，地址栏会看到不安全也不美观，数据过多的话，也不行
2. 使用params带过去，会刷新失效，并且现在vue-router4已经不可以这么使用，带过去的参数在页面中是拿不到的，早在报的警告中可以看到

大概就是说，这种用法如果没有在路由表上面声明动态参数，将会造成刷新后参数丢失。 在 v4.1.4 版本的更新中，增加了**删除未使用的参数**这个功能。所以会提示你 Discarded invalid param(s) "name", "price", "id"（丢弃无效的参数 "name", "price", "id"）。 如果想要解决，可以在路由表中声明你用到的这些参数，或者使用 query 的形式来传递参数。也可以用 vuex 之类的状态管理来暂存。

相关链接： github.com/vuejs/route…

既然人家都说了用pina，那咱就用一下是吧，下面使用pina保存数据以便在多个页面中使用

1. 安装插件

yarn add pinia // pinia
yarn add pinia-plugin-persist // pinia持久化插件

2. 注册

// src/main.ts
// pinia 持久化
import piniaPersist from 'pinia-plugin-persist'
// pinia 全局注册
import { createPinia } from 'pinia'
const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)

3. pinia模块封装

// src/store/module/enrolmemnt.ts
import { defineStore } from 'pinia'
const useEnrolmentStore = defineStore({
  id: 'enrolment',
  state: () => ({
    table: {} // 列表信息
  }),
  actions: {
    setEnrolmentData(obj: object) {
      this.table = obj
    }
  },
  // 这里要写上true
  persist: {
    enabled: true
  }
})
export default useEnrolmentStore

4. 模块封装好后在统一的导出一下

// src/store/index
import useEnrolmentStore from './module/enrolment'
const useStore = () => ({
  enrolment: useEnrolmentStore()
})
export default useStore

5. 使用

import useStore from "@/store";

const { enrolmemnt } = useStore()
// state
const table = enrolmemnt.table
// action
user.setEnrolmentData(obj).then(({data})=>{
	console.log(data)
})