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

相关推荐
Britney⁺♛&?ꪶꪫꪜꫀ3 小时前
Vue2上
vue.js·npm
江城开朗的豌豆3 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
海天胜景6 小时前
vue3 el-table 列数据合计
前端·javascript·vue.js
征尘bjajmd6 小时前
vue+element-ui实现主子表
javascript·vue.js·elementui
帧栈6 小时前
开发避坑短篇(6):Vue+Element UI 深度选择器实现表单元素精准对齐的技术实践
vue.js·ui·elementui
小毛驴8506 小时前
典型的 Vue 3 项目目录结构详解
前端·javascript·vue.js
半生过往6 小时前
Vue 项目动态接口获取翻译数据实现方案(前端处理语言翻译 vue-i18n)
前端·javascript·vue.js·i18n
yume_sibai7 小时前
Vue 插槽
前端·javascript·vue.js
The_era_achievs_hero7 小时前
UniappDay03
vue.js·微信小程序·uni-app
O败者食尘D7 小时前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome