一 基本使用
1 项目安装pinia
npm i pinia
2 main.js中导入
import { createPinia } from 'pinia';
// 创建pinia实例
const pinia = createPinia()
app.use(pinia);
3 新建一个文件用来管理状态
在src下新建store文件夹，在store文件夹下新建一个js文件如demoStore.js，我用useDemoStore.js来命名
import { defineStore } from "pinia";
//defineStore两个参数:1模块名称 2对象包含state函数、getters和actions对象
export const useDemoStore = defineStore('demo',{
state:()=>{
return {
name:"张三",
age:1
}
},
getters:{},
actions:{}
})
4 访问store中的状态
步骤1 ：导入store, 调用useStore得到响应式对象store
步骤2 ：获取状态（两种方式）
<script setup>
import { ref } from "vue";
import { useDemoStore } from "@/store/useDemoStore";
import { storeToRefs } from "pinia";
const store = useDemoStore();
//方式1：直接通过store.xxx获取
console.log(store.phone);
//方式2 : 解构使用, 需要使用钩子storeToRefs, 不然解构后的变量不具备响应式
// let { name, msg } = store; // 不具备响应式
let { name, msg } = storeToRefs(store);
二 修改状态
方法1 ：通过$patch直接修改store状态
import { useDemoStore } from "@/store/useDemoStore";
const store = useDemoStore();
//调用store.$patch
store.$patch((state) => {
state.msg = "哈哈哈哈";
});
方法2：通过action
1 编写自定义文件useDemoStore.js中的action
actions:{
changeName(newName){
this.name = newName;
}
}
2 调用action中定义的方法
import { useDemoStore } from "@/store/useDemoStore";
const store = useDemoStore();
//调用actions中的方法
store.changeName("李四");
三 使用getters
getters: {
msg2(state) {
return state.msg.toUpperCase();
}
}
四 pinia持久化
1 安装
npm install pinia-plugin-persist --save
2 在main.js导入使用
import piniaPluginPersist from 'pinia-plugin-persist';
const pinia = createPinia();
pinia.use(piniaPluginPersist);
3 缓存相关设置
export const useDemoStore = defineStore("demo", {
//缓存配置
persist: {
enabled: true,
strategies: [
{
// 缓存的模块名称,对应缓存中的密钥key
key: "demo",
// 保存位置，默认保存在sessionStorage
storage: localStorage,
// 缓存哪些状态
paths: ["name"]
}
]
},
// ....
});
