vue pinia 独立维护,仓库统一导出

它允许您跨组件/页面共享状态

  1. 持久化

    1. 安装依赖pnpm i pinia-plugin-persistedstate

    2. 将插件添加到 pinia 实例上

    3. pinia独立维护

    4. 统一导出

    import { createPinia } from 'pinia'
    import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

    const pinia = createPinia()
    //加载持久化
    pinia.use(piniaPluginPersistedstate)

    export default pinia

    // 在这里导出
    // import { useUserStore } from "@/stores/modules/user"
    // export { useUserStore }
    // import { useCountStore } from "@/stores/modules/counter"
    // export { useCountStore }

    //优化统一 导出
    export * from "@/stores/modules/user"
    export * from "@/stores/modules/counter"

    这里是app use部分
    **在main.js中要use封装好的pinia
    import pinia from './stores/index'
    app.use(pinia)

    这里是调用部分
    **使用pinia代码如下
    //以后想用哪个就import哪个store
    import { useUserStore, useCountStore } from "@/stores/index"
    const userStore = useUserStore()
    const countStore = useCountStore()

相关推荐
技术钱15 小时前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
一只小风华~18 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
计算机学姐18 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA20 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
小谭鸡米花21 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
好好好明天会更好21 小时前
Vue2中页面数据响应的问题
前端·javascript·vue.js
拉不动的猪21 小时前
回顾前端项目打包时--脚本引入时机与环境类型的判断问题
前端·vue.js·面试
月弦笙音21 小时前
【Vue组件】封装组件该考虑的核心点
前端·javascript·vue.js
EF@蛐蛐堂1 天前
Federation vs Garfish vs Micro-app 微前端选型(二)
前端·vue.js·前端框架
一枚前端小能手1 天前
🔍 重写vue之ref和reactive
前端·javascript·vue.js