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

相关推荐
XTTX1108 小时前
Vue3+Cesium教程(36)--动态设置降雨效果
前端·javascript·vue.js
前端小超超11 小时前
ionic + vue3 + capacitor遇到backButton问题
前端·javascript·vue.js
起名时在学Aiifox13 小时前
从零实现前端数据格式化工具:以船员经验数据展示为例
前端·vue.js·typescript·es6
放牛的小伙13 小时前
vue 表格 vxe-table 加载数据的几种方式,更新数据的用法
vue.js
pas13614 小时前
25-mini-vue fragment & Text
前端·javascript·vue.js
满天星辰14 小时前
Vue 响应式原理深度解析
前端·vue.js
满天星辰14 小时前
Vue真的是单向数据流?
前端·vue.js
boooooooom15 小时前
深入浅出 Vue3 defineModel:极简实现组件双向绑定
vue.js
pas13615 小时前
29-mini-vue element搭建更新
前端·javascript·vue.js
裴嘉靖15 小时前
Vue + Element UI 实现复选框删除线
javascript·vue.js·ui