Pinia uses plug-ins for persistent storage.

1. install pinia Persistence plug-in

npm i pinia-plugin-persist -S

Optimize 1：pinia Put it in main.js Make the main file appear a little bloated , Now let's deal with this problem

1. stay src Create a new one in the directory index.js file , Write the following , Register the plug-in for use

import {
     createPinia } from 'pinia'
//  Introduce persistence plug-ins 
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
//  Use this plug-in 
store.use(piniaPluginPersist)

// export 
export default store

2. stay main.js Register in

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. stay store Create a new folder test.js file , Let's use the persistence plug-in

import {
     defineStore } from 'pinia'
import axios from 'axios'
export default defineStore('main', {
    
  state: () => {
    
    return {
    
      count: 10,
      name: ' Hezhiwei ',
      list: [{
    
        name: 'ipone',
        price: 5800,
        count: 1
      },
      {
    
        name: 'huawei',
        price: 5800,
        count: 2
      }],
      timuList: []
    }
  },
  //  Use this plug-in , Turn on the data cache 
  persist: {
    
  // The default storage here is session
    enabled: true,
    strategies: [
      {
    
        //key The name of 
        key: 'my_user',
        // Change default storage , I changed to localStorage
        storage: localStorage,
        //  You can choose which to enter local Storage , So you don't have to store everything 
        //  The default is to store all 
        paths: ['list']
      }
    ]
  }
})