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()

相关推荐
练习前端两年半4 小时前
🚀 Vue3 源码深度解析:Diff算法的五步优化策略与最长递增子序列的巧妙应用
前端·vue.js
Cheney95016 小时前
TypeScript 中,! 是 非空断言操作符
前端·vue.js·typescript
张志鹏PHP全栈8 小时前
Vue3第十八天,Vue3中的组件通信
前端·vue.js
小周同学:8 小时前
在 Vue2 中使用 pdf.js + pdf-lib 实现 PDF 预览、手写签名、文字批注与高保真导出
开发语言·前端·javascript·vue.js·pdf
JSON_L9 小时前
Vue Vant应用-数据懒加载
前端·javascript·vue.js
可爱小仙子9 小时前
vue-quill-editor上传图片vue3
前端·javascript·vue.js
IT毕设实战小研9 小时前
基于Spring Boot校园二手交易平台系统设计与实现 二手交易系统 交易平台小程序
java·数据库·vue.js·spring boot·后端·小程序·课程设计
小高0079 小时前
第一章 桃园灯火初燃,响应义旗始揭
前端·javascript·vue.js
小高0079 小时前
第二章 虎牢关前初试Composition,吕布持v-model搦战
前端·javascript·vue.js
自由的疯10 小时前
Vue与Java集成DeepSeek智能客服(继续优化)
前端·vue.js·trae