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

相关推荐
J***Q29238 分钟前
Vue数据可视化
前端·vue.js·信息可视化
JIngJaneIL1 小时前
社区互助|社区交易|基于springboot+vue的社区互助交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·社区互助
ttod_qzstudio2 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
1***s6323 小时前
Vue图像处理开发
javascript·vue.js·ecmascript
一 乐3 小时前
应急知识学习|基于springboot+vue的应急知识学习系统(源码+数据库+文档)
数据库·vue.js·spring boot
E***q5396 小时前
Vue增强现实开发
前端·vue.js·ar
4***14906 小时前
Vue代码规范详解
javascript·vue.js·代码规范
梦想CAD控件8 小时前
AI生成CAD图纸(云原生CAD+AI让设计像聊天一样简单)
前端·javascript·vue.js
诸葛亮的芭蕉扇8 小时前
tree组件点击节点间隙的异常问题分析
前端·javascript·vue.js
不努力也不会混9 小时前
vite联邦实现微前端(vite-plugin-federation)
前端·vue.js