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

相关推荐
踩着两条虫1 天前
VTJ.PRO 核心架构全公开!从设计稿到代码,揭秘AI智能体如何“听懂人话”
前端·vue.js·ai编程
蓝冰凌1 天前
Vue 3 中 defineExpose 的行为【defineExpose暴露ref变量】详解:自动解包、响应性与实际使用
前端·javascript·vue.js
奔跑的呱呱牛1 天前
generate-route-vue基于文件系统的 Vue Router 动态路由生成工具
前端·javascript·vue.js
sp42a1 天前
在 NativeScript-Vue 中实现流畅的共享元素转场动画
vue.js·nativescript·app 开发
还是大剑师兰特1 天前
Vue3 中 computed(计算属性)完整使用指南
前端·javascript·vue.js
孜孜不倦不忘初心1 天前
Ant Design Vue 表格组件空数据统一处理 踩坑
前端·vue.js·ant design
csdn_aspnet1 天前
查看 vite 与 vue 版本
javascript·vue.js
于先生吖1 天前
SpringBoot+Vue 前后端分离短剧漫剧系统开发实战
vue.js·spring boot·后端
毕设源码-赖学姐1 天前
【开题答辩全过程】以 基于VUE的环保网站设计为例,包含答辩的问题和答案
前端·javascript·vue.js