pinia以及做持久化（页面刷新数据不丢失，pc端，uniapp，使用nuxt框架三种）

很久没写文章了，提笔写下这篇也是因为做uniapp使用pinia做持久化踩了一下午坑......

1.先讲pinia在uniapp中做持久化吧

相信大家在做pc项目都用过pinia并且做过持久化，但是在uniapp里面的持久化与pc是不一样的，uniappp中使用的插件是pinia-plugin-unistorage

先安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

在uniapp项目中导入pinia持久化插件pinia-plugin-unistorage

https://ext.dcloud.net.cn/plugin?id=8081

在mian.js写入

//导入pinia
import * as Pinia from 'pinia'
import {
	createUnistorage
} from '@/uni_modules/pinia-plugin-unistorage'


import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	// 创建Pinia实例  // 将pinia实例挂载到vue实例上 
	// app.use(Pinia.createPinia());  // 之前使用pinia但是没有做持久化，可以注释了，不然会报一个警告
	// 状态管理
	const store = Pinia.createPinia()
	// 持久化
	store.use(createUnistorage())
	app.use(store)
	return {
		app,
		Pinia, // 此处必须将 Pinia 返回	
	}
}

在项目中新建一个文件，里面建一个js文件

usePostsIdStore.js文件内容，主要一点：unistorage: true开启pinia持久化

// 导入定义仓库的方法
import { defineStore } from 'pinia';

// 导入响应式和计算
import {
	ref
} from 'vue'
const usePostsIdStore = defineStore('postsId', {
		unistorage: true,  // 开启持久化存储，这里一定要写
		state: () => {
			return {
				postsId: null
			}
		}
	}
)

export default usePostsIdStore;

2.常规pc端

下载插件

yarn add pinia-plugin-persistedstate
# 或者使用 npm
npm i pinia-plugin-persistedstate
# 或者使用 pnpm
pnpm i pinia-plugin-persistedstate

在usePostsIdStore.js中  persist: true开启持久化

import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

在main.js中

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

3.在nuxt框架中使用pinia持久化

 在nuxt中做pinia持久化相对于前两个会简单一些，因为没有main.js文件

下载pinia和pinia持久化插件

    npm install pinia @pinia/nuxt
    npm i -D @pinia-plugin-persistedstate/nuxt

在nuxt.config.ts中加入

export default defineNuxtConfig({
  modules: [
    "@pinia/nuxt",
    "@pinia-plugin-persistedstate/nuxt",
  ],
})

store的js文件

import { defineStore } from "pinia"; //引入pinia

//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useActiveInfo = defineStore("test", {
  state: () => {
    return {
      active: 0, // 菜单激活选项
    }; //为了避免出错，返回的值用()包起来
  },
  persist: true,
});

下面这个是在外面怎么使用pinia

import { useActiveInfo } from "@/store/index.js"; //pinia
const activeInfo = useActiveInfo();
const onSelectMenus = (index) => {
  activeInfo.active = index;
};

以上就是三种pinia持久化的方法

有任何问题请私信我或评论区留言！！！！！！！！