pinia

安装 npm install pinia main.js中

 import { createPinia } from 'pinia'
 const pinia = createPinia()
 const app = createApp(App)
 app.use(pinia)
 app.mount('#app')

创建一个.js文件，如web.js

import { reactive,ref } from "vue";
import { defineStore } from "pinia";
/*
  定义一个基于 Pinia 的 Store
  第1个参数 web 是 useWebStore 在应用中的唯一标识符(ID)
  第2个参数是 Setup函数 或 Option对象
*/
export const useWebStore = defineStore("web", () => {
    const web = reactive({
        title: "甜菜菜",
        url: "www.caicai.com"
    });
    const users = ref(1000);
    const addUser = () => {
        users.value++;
    }
    return { web, users ,addUser};
}
);

其中注意导入import { defineStore } from "pinia"; 导出的useWebStore是有自己格式的 App.vue中导入import { useWebStore } from './stores/web'; 获取数据const webStore = useWebStore(); 如下

<script setup>
    import { useWebStore } from './stores/web'; 
    const webStore = useWebStore();
</script>

<template>
  {{ webStore.web.title }}
  {{ webStore.web.url }}
  {{ webStore.users }}

  <button @click="webStore.addUser">添加用户</button>
</template>

<style scoped>

</style>

Pinia持久化储存插件 安装npm i pinia-plugin-persistedstate 在main.js中

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'
//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)

web.js中defineStore加入参数

{
  //持久化存储到 localStorage 中
  persist: true
}

注：pinia持久化插件也是存储到localStorage中,

为什么不直接使用localStorage?

自动状态同步

       持久化插件自动将Pinia的状态存储到localStorage中,

       无需手动处理状态的读取和写入

易用性

       无需手动处理localStorage的键值对存储、数据转换等繁琐过程

与Vue组件状态紧密集成

       持久化插件与Vue组件的响应式数据完美结合

       当状态改变时,依赖这些状态的组件会自动更新视图

       与仅仅从localStorage中读取静态数据相比更加灵活和强大