[{"data":1,"prerenderedAt":177},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fminiprogram-uniapp-use-pinia":3,"surround:\u002Fposts\u002F2022\u002Fminiprogram-uniapp-use-pinia":166},{"id":4,"title":5,"body":6,"canonical":144,"categories":145,"date":147,"description":144,"draft":148,"extension":149,"image":150,"meta":151,"navigation":152,"path":153,"permalink":144,"readingTime":154,"recommend":144,"references":144,"seo":159,"sitemap":160,"stem":161,"tags":162,"type":144,"updated":147,"__hash__":165},"content\u002Fposts\u002F2022\u002Fminiprogram-uniapp-use-pinia.md","uniapp中使用pinia",{"type":7,"value":8,"toc":132},"minimark",[9,14,25,29,35,38,47,50,57,61,72,75,81,84,89,95,98,101,107,110,118,121,126],[10,11,13],"h2",{"id":12},"在小程序中使用-pinia","在小程序中使用 pinia",[15,16,22],"pre",{"className":17,"code":19,"language":20,"meta":21},[18],"language-bash","npm init -y\n","bash","",[23,24,19],"code",{"__ignoreMap":21},[26,27,28],"p",{},"安装 pinia",[15,30,33],{"className":31,"code":32,"language":20,"meta":21},[18],"npm install pinia\n",[23,34,32],{"__ignoreMap":21},[26,36,37],{},"创建 store 文件夹用来管理状态",[15,39,45],{"className":40,"code":42,"language":43,"meta":44},[41],"language-js","\u002F\u002F store\u002Findex.js\nimport { createPinia } from \"pinia\"\n\nconst store = createPinia()\nexport default store\n","js","store\u002Findex.js",[23,46,42],{"__ignoreMap":21},[26,48,49],{},"在 mian.js 中引入 pinia",[15,51,55],{"className":52,"code":53,"language":43,"meta":54},[41],"\u002F\u002F #ifndef VUE3\nimport Vue from \"vue\"\nimport App from \".\u002FApp\"\n\nVue.config.productionTip = false\n\nApp.mpType = \"app\"\n\nconst app = new Vue({\n  ...App,\n})\napp.$mount()\n\u002F\u002F #endif\n\n\u002F\u002F #ifdef VUE3\nimport { createSSRApp } from \"vue\"\nimport pinia from \".\u002Fstore\u002Findex.js\"\nimport App from \".\u002FApp.vue\"\n\nexport function createApp() {\n  const app = createSSRApp(App)\n  app.use(pinia)\n  return {\n    app,\n  }\n}\n\u002F\u002F #endif\n","main.js",[23,56,53],{"__ignoreMap":21},[10,58,60],{"id":59},"创建-store-及在页面中使用","创建 store 及在页面中使用",[26,62,63,64,71],{},"详情见",[65,66,70],"a",{"href":67,"rel":68},"https:\u002F\u002Fweilog.me\u002F2022\u002Fpinia-setup",[69],"nofollow","pinia","一章",[10,73,74],{"id":74},"在小程序中实现数据的持久化存储",[76,77,78],"blockquote",{},[26,79,80],{},"在一些时候，我们需要持久化存储一些数据，保证页面刷新后还能拿到对应的数据",[26,82,83],{},"我们可以使用 uni-app 的数据存储方法，uni-app 的数据存储和获取方法可以做到直接存储对象或数组到本地缓存中。我们可以利用这个来做。",[85,86,88],"h3",{"id":87},"存储数据获取数据删除数据的简易封装","存储数据\u002F获取数据\u002F删除数据的简易封装",[15,90,93],{"className":91,"code":92,"language":43,"meta":21},[41],"export default {\n    \u002F\u002F 获取本地缓存中的数据\n    get(key) {\n        try {\n            return uni.getStorageSync(key)\n        }\n        catch (e) {\n            console.error(e)\n        }\n    },\n    \u002F\u002F 数据持久化存储\n    set(key, value) {\n        try {\n            uni.setStorageSync(key, value)\n        }\n        catch (e) {\n            console.error(e)\n        }\n    },\n    \u002F\u002F 移除本地存储中的数据\n    remove(key) {\n        try {\n            uni.removeStorageSync(key)\n        }\n        catch (e) {\n            console.error(e)\n        }\n    },\n}\n",[23,94,92],{"__ignoreMap":21},[85,96,97],{"id":97},"存储数据键值对的封装",[26,99,100],{},"我们可以参考 ts 的 enum，将要存储到 storage 中的 key 和程序中的 key 分离开来，后期要修改 storage 中的键时，程序部分只需改动该文件即可",[15,102,105],{"className":103,"code":104,"language":43,"meta":21},[41],"export default {\n    TOKEN: \"TOKEN\",\n    USER_INFO: \"USER_INFO\",\n}\n",[23,106,104],{"__ignoreMap":21},[26,108,109],{},"此时，我们存入本地存储的 key 为 TOKEN 和 USER_INFO， 如果我们想将 TOKEN 更改为 USER_TOKEN 的话，也只需要改动该文件即可",[15,111,116],{"className":112,"code":113,"highlights":114,"language":43,"meta":21},[41],"export default {\n    TOKEN: \"USER_TOKEN\",\n    USER_INFO: \"USER_INFO\",\n}\n",[115],1,[23,117,113],{"__ignoreMap":21},[85,119,120],{"id":120},"在对应仓库中使用",[76,122,123],{},[26,124,125],{},"这里用 useUserStore 举例",[15,127,130],{"className":128,"code":129,"language":43,"meta":21},[41],"import { defineStore } from \"pinia\"\n\nimport Enmu from \"@\u002Fenmu\u002Findex.js\"\nimport PerStorage from \"@\u002Futils\u002FPerStorage.js\"\n\nexport const useUserStore = defineStore(\"user\", {\n    state: () => {\n        return {\n            userInfo: null,\n            token: \"\",\n        }\n    },\n    getters: {\n        getUserInfo() {\n            return this.userInfo || PerStorage.get(Enmu.USER_INFO) || {}\n        },\n    },\n    actions: {\n        setUserInfo(userInfo) {\n            this.userInfo = userInfo\n            PerStorage.set(Enmu.USER_INFO, userInfo)\n        },\n    },\n})\n",[23,131,129],{"__ignoreMap":21},{"title":21,"searchDepth":133,"depth":133,"links":134},4,[135,137,138],{"id":12,"depth":136,"text":13},2,{"id":59,"depth":136,"text":60},{"id":74,"depth":136,"text":74,"children":139},[140,142,143],{"id":87,"depth":141,"text":88},3,{"id":97,"depth":141,"text":97},{"id":120,"depth":141,"text":120},null,[146],"代码","2022-12-04 15:34:35",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F67a21fdca93bf-78.webp",{},true,"\u002Fposts\u002F2022\u002Fminiprogram-uniapp-use-pinia",{"text":155,"minutes":156,"time":157,"words":158},"3 min read",2.51,150600,502,{"title":5,"description":144},{"loc":153},"posts\u002F2022\u002Fminiprogram-uniapp-use-pinia",[163,164,70],"uniapp","小程序","s-WvXuLd5mxCZ8r5nTWH7UXKMx7GqmRoeKZnIGu2VV0",[167,172],{"title":168,"path":169,"stem":170,"date":171,"type":144,"children":-1},"showToast 在真机会闪退的问题及解决方案","\u002Fposts\u002F2022\u002Fminiprogram-showtoast-true-phone-bug","posts\u002F2022\u002Fminiprogram-showToast-true-phone-bug","2022-12-04 15:33:29",{"title":173,"path":174,"stem":175,"date":176,"type":144,"children":-1},"小程序分包及uniapp分包","\u002Fposts\u002F2022\u002Fminiprogram-subpackages","posts\u002F2022\u002Fminiprogram-subPackages","2022-12-04 15:35:30",1789642596953]