vue3项目安装pinia+持久化

1、安装

安装pinia

npm install pinia

安装持久化插件

npm i pinia-plugin-persistedstate -S

2、注册

import {
	createSSRApp
} from 'vue'
import {
	createPinia
} from 'pinia'//引入pinia
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'//引入持久化插件
const pinia = createPinia()//创建pinia
pinia.use(piniaPluginPersistedstate)//pinia使用持久化

export function createApp() {
	const app = createSSRApp(App)

	app.use(pinia)//全局使用pinia
	return {
		app,
		pinia
	}
}

3、使用store

1、在根目录下创建store文件夹

2、在store文件夹中创建index.js文件

3、在store文件夹中创建modules文件夹（这里做模块化，里面的文件用于保存不同数据 ）

4、index.js

import {
	userDataStore
} from "./modules/user.js"
import {
	userDataStore
} from "./modules/enterprise.js"
const useStore = () => ({
	user: userDataStore(),//保存用户user信息
	enterprise: enterpriseStore(),//保存enterprise信息
});

export default useStore;

5、模块user.js

import {
	defineStore
} from 'pinia'
export const userDataStore = defineStore('user', {
	state: () => {
		return {
			userInfo: {}
		}
	},
	actions: {
		setUserInfo(data) {
			this.userInfo = data
		}
	},
    persist: true,// true 表示开启持久化保存
})

注释：persist: true 默认保存到localStorage

    // persist: true, // true 表示开启持久化保存  默认保存到localStorage
    persist: {
        //保存到sessionStorage
        storage: sessionStorage,
    },

4、页面使用

保存到全局

import {
	userDataStore
} from "@/store/modules/user.js"


const test =()=>{
    userDataStore().setUserInfo({
        name:"Angus-zoe",
        age:"18"
    });
}

使用

import {
	userDataStore
} from "@/store/modules/user.js"
const userInfo = userDataStore().userInfo;
// console.log('我的页面用户数据',userInfo)

5、uniapp+vue3使用pinia

步骤重复1-4   就可以了，唯一不同的是步骤3.5中代码不一样改为：

import {
	defineStore
} from 'pinia'
export const userDataStore = defineStore('user', {
	unistorage: true, // 是否持久化到内存
	state: () => {
		return {
			userInfo: {}
		}
	},
	actions: {
		setUserInfo(data) {
			this.userInfo = data
		}
	},
	persist: {
//使用uni的存储
		    storage: {
                getItem(key) {
                    return uni.getStorageSync(key)
                },
                setItem(key, val) {
                    uni.setStorageSync(key, val)
                },
        },
	}
})