1.引入
- npm install pinia
2.挂载
//在main.js里面挂载
import { createPinia } from "Pinia"
const Pinia=createPinia()
app.use(Pinia)
//3.创建"仓库文件" src/store/user.js
import {defineStore} from "Pinia"
export const user=defineStore("user",{
//1.批量修改state里面的数据
/*
state.$patch({
name:"xx",
sex:"xx"
})
*/
//2.单个修改state里面的数据
/*
引入storeToRefs要保证state具备响应性质才能同步修改
import {storeToRefs}from "Pinia
state.name="xx"
*/
state:()=>{
return{
name:"小张",
sex:"男",
age:"24 "
}
},
//1.在script里面处理 使用getters==>state.numAdd
getters:{
numAdd:(state)=>{
return state.age++
}
},
//1.actions==>state.fn
actions:{
fn(a){
this.name=a
}
}
})//user是该仓库的唯一id,{}公共方法数据
3.在每张页面使用
//4.使用
import {user} from "@/src/store/user.js"
const userData=user()
userData.xx
userDat.方法
4.刷新页面状态也持久化
//npm install pinia-plugin-persistedstate
//在main.js里面引入import piniaPluginPersistedstate from'pinia-plugin-persistedstate';
//在 app.use(pinia); 之前 pinia.use(piniaPluginPersistedstate);
//在每个store文件里面开启持久化persist: true, // 启用持久化
