pinia固化插件的使用

npm i pinia-plugin-persist --save --include=dev
// 或者使用 yarn 安装
yarn add pinia-plugin-persist

安装完成之后，我们可以在main.js 或者 main.ts 中引入。具体代码如下：

import { createApp } from 'vue'

import App from './App.vue'

import { createPinia } from 'pinia';
// 下面是我们安装的固化插件。
import piniaPersist from 'pinia-plugin-persist'

const app = createApp(App);

const pinia = createPinia();

pinia.use(piniaPersist);

// 特别注意：固化插件是 pinia.use 并不是 app.use

app.use(pinia);

app.mount('#app')

具体模块中的使用看下面的代码：

import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
  state(){
    return {
      count: 10,
      num: 20
    }
  },
  persist: { //  固化插件
    enabled: true, // 开启存储
     strategies: [ // 指定存储的位置以及存储的变量都有哪些，该属性可以不写，
        //在不写的情况下，默认存储到 sessionStorage 里面,默认存储 state 里面的所有数据。
      { storage: localStorage, paths: ["count"] },
      // paths 是一个数组，如果写了 就会只存储 count 变量，当然也可以写多个。
    ]
  },
  getters:{

  },
  
  actions:{
    piniaAdd(){
       this.count++;
    }
  }
})