1.安装pinia持久化插件

npm i pinia-plugin-persist -S

优化1：pinia放在main.js中让主文件显得有一些臃肿，那么我们现在先处理这个问题

1.在src目录的store文件下新建一个index.js文件，写入如下内容，对插件进行注册使用

import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
// 使用该插件
store.use(piniaPluginPersist)

//导出
export default store

2.在main.js中进行注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'
const app = createApp(App)

app.use(store).use(router).mount('#app')

3.在store文件夹下新建一个test.js文件，让我们来使用持久化插件

import { defineStore } from 'pinia'
import axios from 'axios'
export default defineStore('main', {
  state: () => {
    return {
      count: 10,
      name: '何志伟',
      list: [{
        name: 'ipone',
        price: 5800,
        count: 1
      },
      {
        name: 'huawei',
        price: 5800,
        count: 2
      }],
      timuList: []
    }
  },
  // 使用该插件，开启数据缓存
  persist: {
  //这里存储默认使用的是session
    enabled: true,
    strategies: [
      {
        //key的名称
        key: 'my_user',
        //更改默认存储，我更改为localStorage
        storage: localStorage,
        // 可以选择哪些进入local存储，这样就不用全部都进去存储了
        // 默认是全部进去存储
        paths: ['list']
      }
    ]
  }
})