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 小时前
Vite + Vue 工程中,为什么需要关注 `postcss.config.ts`?
前端·vue.js·postcss
Python涛哥2 小时前
前端流行框架Vue3教程:24.动态组件
前端·javascript·vue.js
蓝胖子的多啦A梦3 小时前
Vue+css实现扫描动画效果(使用@keyframes scan)
前端·css·vue.js·keyframes scan
layman05285 小时前
vue——v-pre的使用
前端·javascript·vue.js
Python涛哥5 小时前
前端流行框架Vue3教程:25. 组件保持存活
前端·javascript·vue.js
Hello-Mr.Wang6 小时前
基于 Vue3 与 exceljs 实现自定义导出 Excel 模板
前端·vue.js·excel
Greatlifeee7 小时前
VUE3+TS实现图片缩放移动弹窗
前端·javascript·vue.js
笔直向前冲7 小时前
el-table控制type=“expand“展开列 根据条件显示或隐藏展开按钮
javascript·vue.js·elementui
程序员Bears9 小时前
实战教程:基于Vue.js与Django REST Framework的任务管理SPA开发全流程
前端·vue.js·django