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)
                },
        },
	}
})

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Angus-zoe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值