1.下载依赖
npm install pinia
2.在src下面创建store/index.ts文件
import { createPinia } from "pinia";
// 创建
const pinia = createPinia();
// 导出
export default pinia;
3.在src下面在创建store/useMyStore.ts文件
import { defineStore } from "pinia";
interface userFormType {
user: string;
id: string;
age: string;
sex: string;
}
interface State {
userForm: userFormType;
}
export const useMyStore = defineStore("userForm", {
state: (): State => ({
userForm: {
user: "",
id: "",
age: "",
sex: "",
},
// 其他状态
}),
getters: {
// 获取用户信息
userInfo(): userFormType {
return this.userForm;
},
},
actions: {
// 修改用户信息
setUserInfo(data: userFormType) {
this.userForm = data;
},
},
});
4. 修改main.ts
![](https://img-blog.csdnimg.cn/direct/3a29a043bc644286a8ad9b6c9ff5db13.png)
5.页面基本使用
<template>
<div class="p-4">
<!-- 页面使用 -->
<div>{{ useStore.userForm }}</div>
<button @click="setStore">设置stroe</button>
<button @click="getStore">获取stroe</button>
</div>
</template>
<script setup lang="ts">
// 先导入
import { useMyStore } from "@/store/useMyStore";
// 实例化
const useStore = useMyStore()
// 设置数据
let setStore = () => {
useStore.setUserInfo({
user: "张三",
id: "1",
age: "18",
sex: "男",
});
};
// 获取数据
let getStore = () => {
console.log(useStore.userInfo);
};
</script>
<style lang="scss"></style>
6.pinia的api方法 $subscribe $onAction监听修改
<template>
<div class="p-4">
<!-- 页面使用 -->
<div>{{ useStore.userForm }}</div>
<el-button @click="setStore">设置stroe</el-button>
<el-button @click="getStore">获取stroe</el-button>
<el-button @click="resetStore">重置stroe</el-button>
</div>
</template>
<script setup lang="ts">
// 先导入
import { useMyStore } from "@/store/useMyStore";
// 实例化
const useStore = useMyStore()
// 设置数据
let setStore = () => {
useStore.setUserInfo({
user: "张三",
id: "1",
age: "18",
sex: "男",
});
};
// 获取数据
let getStore = () => {
console.log(useStore.userInfo);
};
// 重置数据
let resetStore = () => {
useStore.$reset();
};
// 用来监听state值改变
useStore.$subscribe((args, state) => {
console.log('state值改变',args, state);
}, {
detached: true,
deep: true,
flush: 'post'
});
// 用来监听action方法调用
useStore.$onAction((args) => {
args.after(() => {
console.log("action调用后");
});
}, true);
</script>
<style lang="scss"></style>
7. pinia的持久化
7.1 下载依赖
npm i pinia-plugin-persistedstate
7.2 在初始化Pinia时,使用pinia-plugin-persistedstate插件来配置数据持久化
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件
// 创建
const pinia = createPinia();
// 使用插件
pinia.use(piniaPluginPersistedstate);
// 导出
export default pinia;
7.3 持久化配置
import { defineStore } from "pinia";
interface userFormType {
user: string;
id: string;
age: string;
sex: string;
}
interface State {
userForm: userFormType;
}
export const useMyStore = defineStore("userForm", {
state: (): State => ({
userForm: {
user: "",
id: "",
age: "",
sex: "",
},
}),
getters: {
// 获取用户信息
userInfo(): userFormType {
return this.userForm;
},
},
actions: {
// 修改用户信息
setUserInfo(data: userFormType) {
this.userForm = data;
},
},
// persist:true, // 整个 Store 将使用默认持久化配置保存。
persist: {
key: "userForm", //存储名称
storage: localStorage, // 存储方式
paths: ["userForm"], //指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态,undefined 或 null 表示持久化整个 state
},
});