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

相关推荐
吹牛不交税44 分钟前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
MZ_ZXD0012 小时前
springboot旅游信息管理系统-计算机毕业设计源码21675
java·c++·vue.js·spring boot·python·django·php
_codemonster4 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
wqq63108556 小时前
Python基于Vue的实验室管理系统 django flask pycharm
vue.js·python·django
Deng9452013146 小时前
Vue + Flask 前后端分离项目实战:从零搭建一个完整博客系统
前端·vue.js·flask
Hello.Reader7 小时前
Flink 文件系统通用配置默认文件系统与连接数限制实战
vue.js·flink·npm
EchoEcho9 小时前
深入理解 Vue.js 渲染机制:从声明式到虚拟 DOM 的完整实现
vue.js
C澒9 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
发现一只大呆瓜10 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
鱼毓屿御11 小时前
如何给用户添加权限
前端·javascript·vue.js