pinia的使用vue3

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);
})