1.安装pinia
pinia持久化工具pinia-plugin-persist
npm install pinia pinia-plugin-persist -D -S
2.使用pinia
main.js
import store from "/@/store";
app.use(store);
index.js
import { createPinia } from "pinia";
import piniaPluginPersist from "pinia-plugin-persist";
const store = createPinia();
store.use(piniaPluginPersist);
export default store;
userStore.js
可以创建多个此文件
import { defineStore } from "pinia";
export const userStore = defineStore({
id: "user",
state: () => {
return {
name: ""
};
},
//类似于computed 可以帮我们去修饰我们的值,相当于过滤器
//函数接受一个可选参数 state
getters: {
formatNum() {
return num => {
return num++;
};
}
},
actions: {
changeState(objData, arr) {
arr.map(item => {
this[item] = objData[item];
});
}
},
persist: {
enabled: true, // true 表示开启持久化保存
strategies: [
{
key: "actId", //设置缓存名称
storage: sessionStorage, //设置缓存方式
paths: ["name"] //设置需要缓存的对象
}
]
}
});
页面上
<template>
<div>
<span>姓名:{{ store.name }}---{{name}}</span>
<br />
<span>num:{{ store.formatNum(10) }}---{{formatNum(10)}}</span>
</div>
<el-button @click="handleClick">点击</el-button>
</template>
<script setup>
import { userStore } from "/@/store/userStore"; //引入store文件
const store = userStore(); //声明赋值引入的store文件
import { storeToRefs } from "pinia"; //引入storeToRefs
const { name, formatNum } = storeToRefs(store); //数据解构出来
//使用storeToRefs函数将state里的数据解构出来实现响应式
修改store方法一：
可以同时修改多个数据
store .$patch(state => {
state.name="小可爱"；
......
})；
修改store方法二：
store.name = "小可爱"；
修改store方法三：
调用方法：
//逻辑比较多用action(可以同步也可以异步)
const handleClick = () => {
let num = store.formatNum(10);
store.$patch(state => {
state.name="小可爱"；
......
});
};
</script>
3.常见API
$reset():重置store到它的初始状态
const resetFn=()=>{
store.$reset()
}
$subscribe:订阅state的改变，只要有state 的变化就会走这个函数
store.$subscribe((args,state)=>{
console.log(args,state);
})
$onAction:订阅Actions的改变，只要有actions被调用就会走这个函数
store.$onAction((args)=>{
console.log(args);
})
