Pinia及数据持久化存储详细教程

一、持久化准备

建议使用插件pinia-plugin-persistedstate 来进行数据的持久化存储

1、安装

使用命令：

//pnpm
 pnpm i pinia-plugin-persistedstate 
//npm
 npm i pinia-plugin-persistedstate 
//yarn
yarn add pinia-plugin-persistedstate 

2、在main.ts中挂载

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
import persist from 'pinia-plugin-persistedstate'

const pinia=createPinia().use(persist)
const app=createApp(App)

app.use(pinia)
app.mount('#app')

3、开启持久化

即在仓库store/counter.ts中写入如下代码：

这里用count++举个简单的例子

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const editFn = () =>{count++}
  function increment() {
  
  }

  return { count, editFn, increment }
},
{
  persist: true
  //开启持久化
})

4、效果如下：

在本地存储里可以看到仓库中存的数据