pinia的使用

pinia的使用

1、下载依赖 和 持久化存储

yarn add pinia pinia-plugin-persist

2、创建store/index.js文件

import { createPinia } from "pinia"
import piniaPluginPersist from "pinia-plugin-persist"

const store = createPinia()
store.use(piniaPluginPersist)

export default store; 

3、模块化存储，创建 store/user.js 文件

import { defineStore } from "pinia"
export const useUserStore = defineStore({
	id: "user",
	state: () => {
		return {
			token: ''
		}
	},
	actions: {
		setToken(token) {
			this.token = token
		}
	},

	getters: {

	},

	//  开启数据缓存
	persist: {
		enabled: true,
		strategies: [
			{
				key: 'xiaoluxian_user',
				storage: localStorage
			}
		]
	}
})

4、pinia的使用

import { storeToRefs } from "pinia"  // 结构出来的值还是响应式的
import { useUserStore } from "../store/user.js"
const store = useUserStore();
let { token } = storeToRefs(store)
store.setToken('要存到token里面的值')  // 往pinia里面存值， 不需要经过storeToRefs转换了
console.log(token)  // 从pinia里面取值，要想数据具有响应式，需要storeToRefs包裹一下