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

相关推荐
QQ1__8115175158 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
IT枫斗者8 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
難釋懷9 小时前
Vue混入
前端·javascript·vue.js
訾博ZiBo9 小时前
Vue3响应式高阶用法之toRaw()
javascript·vue.js·ecmascript
涵涵(互关)12 小时前
GoView各项目文件中的相关语法2
前端·javascript·vue.js
焰火199913 小时前
[Vue]可重置的响应式状态reactive
前端·vue.js
源码宝13 小时前
基于 SpringBoot + Vue 的医院随访系统:技术架构与功能实现
java·vue.js·spring boot·架构·源码·随访系统·随访管理
老王以为13 小时前
为什么 React 和 Vue 不一样?
前端·vue.js·react.js
web打印社区13 小时前
2026最新Web静默打印解决方案,无插件无预览,完美替代Lodop
前端·javascript·vue.js·electron·pdf
Forever7_15 小时前
Vue 全局监控用户行为,最强方案!
vue.js