一 基本使用

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"]
      }
    ]
  },
  // ....
});