[{"data":1,"prerenderedAt":276},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fpinia-setup":3,"surround:\u002Fposts\u002F2022\u002Fpinia-setup":265},{"id":4,"title":5,"body":6,"canonical":244,"categories":245,"date":247,"description":248,"draft":249,"extension":250,"image":251,"meta":252,"navigation":253,"path":254,"permalink":244,"readingTime":255,"recommend":244,"references":244,"seo":260,"sitemap":261,"stem":262,"tags":263,"type":244,"updated":247,"__hash__":264},"content\u002Fposts\u002F2022\u002Fpinia-setup.md","pinia 快速使用",{"type":7,"value":8,"toc":230},"minimark",[9,23,27,30,41,44,50,53,59,63,71,75,80,86,89,97,100,106,110,116,119,124,132,135,141,145,150,156,159,164,170,174,179,185,188,196,200,204,211,214],[10,11,12],"blockquote",{},[13,14,15,16],"p",{},"详细文档请访问 ",[17,18,22],"a",{"href":19,"rel":20},"https:\u002F\u002Fpinia.vuejs.org",[21],"nofollow","pinia",[24,25,26],"h2",{"id":26},"安装",[13,28,29],{},"使用 npm",[31,32,38],"pre",{"className":33,"code":35,"language":36,"meta":37},[34],"language-shell","npm i pinia\n","shell","",[39,40,35],"code",{"__ignoreMap":37},[13,42,43],{},"使用 yarn",[31,45,48],{"className":46,"code":47,"language":36,"meta":37},[34],"yarn add pinia\n",[39,49,47],{"__ignoreMap":37},[13,51,52],{},"使用 pnpm",[31,54,57],{"className":55,"code":56,"language":36,"meta":37},[34],"pnpm i pinia\n",[39,58,56],{"__ignoreMap":37},[24,60,62],{"id":61},"在-vue-中使用","在 vue 中使用",[31,64,69],{"className":65,"code":67,"language":68,"meta":37},[66],"language-ts","import { createPinia } from \"pinia\"\nimport { createApp } from \"vue\"\n\nconst app = createApp()\nconst pinia = createPinia()\napp.use(pinia)\napp.mount(\"#app\")\n","ts",[39,70,67],{"__ignoreMap":37},[24,72,74],{"id":73},"定义一个-store","定义一个 Store",[10,76,77],{},[13,78,79],{},"导出的 store 函数名一般使用 use 开头",[31,81,84],{"className":82,"code":83,"language":68,"meta":37},[66],"import { defineStore } from \"pinia\"\n\u002F\u002F 第一个参数在全局store中的唯一id\nexport const useUserStore = defineStore(\"user\", {})\n",[39,85,83],{"__ignoreMap":37},[13,87,88],{},"在页面中使用 store",[31,90,95],{"className":91,"code":93,"language":94,"meta":37},[92],"language-html","\u003Cscript lang=\"ts\" setup>\nimport { useUserStore } from \"@\u002Fstore\u002Fmodel\u002FuserStore\"\nconst userStore = useUserStore()\n\u002F\u002F 可以使用userStore.xx来访问store中的内容\n\u003C\u002Fscript>\n","html",[39,96,93],{"__ignoreMap":37},[13,98,99],{},"or",[31,101,104],{"className":102,"code":103,"language":94,"meta":37},[92],"\u003Cscript lang=\"ts\" setup>\nimport { useUserStore } from \"@\u002Fstore\u002Fmodel\u002FuserStore\"\nimport { storeToRefs } from \"pinia\"\nconst userStore = useUserStore()\nconst { userInfo } = storeToRefs(userStore)\n\u003C\u002Fscript>\n",[39,105,103],{"__ignoreMap":37},[24,107,109],{"id":108},"state","State",[31,111,114],{"className":112,"code":113,"language":68,"meta":37},[66],"import { defineStore } from \"pinia\"\n\nexport const useUserStore = defineStore(\"user\", {\n    state: () => {\n        return {\n            userInfo: null,\n        }\n    },\n})\n",[39,115,113],{"__ignoreMap":37},[13,117,118],{},"在页面中访问 state",[10,120,121],{},[13,122,123],{},"可以直接写入\u002F读取状态",[31,125,130],{"className":126,"code":128,"language":129,"meta":37},[127],"language-js","import { useUserStore } from \"@\u002Fstore\u002Fmodel\u002FuserStore\"\n\nconst userStore = useUserStore()\nuserStore.userInfo = { name: \"wxw\", age: 23 }\nconsole.log(userStore.userInfo)\n","js",[39,131,128],{"__ignoreMap":37},[13,133,134],{},"重置状态",[31,136,139],{"className":137,"code":138,"language":129,"meta":37},[127],"import { useUserStore } from \"@\u002Fstore\u002Fmodel\u002FuserStore\"\n\nconst userStore = useUserStore()\nuserStore.$reset()\n",[39,140,138],{"__ignoreMap":37},[24,142,144],{"id":143},"getters","Getters",[10,146,147],{},[13,148,149],{},"可以等同于 vue 中的计算属性",[31,151,154],{"className":152,"code":153,"language":68,"meta":37},[66],"import { defineStore } from \"pinia\"\n\nexport const useUserStore = defineStore(\"user\", {\n    state: () => {\n        return {\n            userInfo: null,\n        }\n    },\n    getters: {\n        getUserInfo() {\n            return this.userInfo\n        },\n    },\n})\n",[39,155,153],{"__ignoreMap":37},[13,157,158],{},"在页面中使用 getter",[10,160,161],{},[13,162,163],{},"getter 是属性，访问时不需要使用函数的方式来访问",[31,165,168],{"className":166,"code":167,"language":94,"meta":37},[92],"\u003Cscript lang=\"ts\" setup>\nimport { useUserStore } from \"@\u002Fstore\u002Fmodel\u002FuserStore\"\nconst userStore = useUserStore()\n\nsetTimeout(() => {\n    userStore.userInfo = { name: \"wxw\", age: 23 }\n}, 3000)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>{{ userStore.getUserInfo }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[39,169,167],{"__ignoreMap":37},[24,171,173],{"id":172},"actions","Actions",[10,175,176],{},[13,177,178],{},"相当于组件的方法（vue2 中的 methods）",[31,180,183],{"className":181,"code":182,"language":68,"meta":37},[66],"import { defineStore } from \"pinia\"\n\nexport const useUserStore = defineStore(\"user\", {\n    state: () => {\n        return {\n            userInfo: null,\n        }\n    },\n    getters: {\n        getUserInfo() {\n            return this.userInfo\n        },\n    },\n    actions: {\n        setUserInfo(userInfo) {\n            this.userInfo = userInfo\n        },\n        \u002F\u002F 也支持异步方法\n        async setAdmin(userInfo) {\n            \u002F\u002F eslint-disable-next-line no-useless-catch\n            try {\n                const { code, data, message } = await setUserApi(userInfo)\n            }\n            catch (error) {\n                throw error\n            }\n        },\n    },\n})\n",[39,184,182],{"__ignoreMap":37},[13,186,187],{},"在组件中使用",[31,189,194],{"className":190,"code":192,"language":193,"meta":37},[191],"language-vue","\u003Cscript lang=\"ts\" setup>\nimport { useUserStore } from \"@\u002Fstore\u002Fmodel\u002FuserStore\"\n\nconst userStore = useUserStore()\nfunction setUser() {\n    userStore.setUserInfo({ name: \"wxw\", age: 23 })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cbutton @click=\"setUser\">\n        设置用户信息\n    \u003C\u002Fbutton>\n    \u003Cdiv>{{ userStore.getUserInfo }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[39,195,192],{"__ignoreMap":37},[24,197,199],{"id":198},"plugins","Plugins",[201,202,203],"h3",{"id":203},"持久化插件",[13,205,206],{},[17,207,210],{"href":208,"rel":209},"https:\u002F\u002Fprazdevs.github.io\u002Fpinia-plugin-persistedstate\u002Fzh\u002F",[21],"pinia-plugin-persistedstate",[212,213],"hr",{},[215,216,217,223],"alert",{},[218,219,220],"template",{"v-slot:title":37},[13,221,222],{},"推介文章",[13,224,225],{},[17,226,229],{"href":227,"rel":228},"https:\u002F\u002Fdev.to\u002Fthe_one\u002Fpinia-how-to-reset-stores-created-with-functionsetup-syntax-1b74",[21],"Pinia: How to reset stores created with function\u002Fsetup syntax",{"title":37,"searchDepth":231,"depth":231,"links":232},4,[233,235,236,237,238,239,240],{"id":26,"depth":234,"text":26},2,{"id":61,"depth":234,"text":62},{"id":73,"depth":234,"text":74},{"id":108,"depth":234,"text":109},{"id":143,"depth":234,"text":144},{"id":172,"depth":234,"text":173},{"id":198,"depth":234,"text":199,"children":241},[242],{"id":203,"depth":243,"text":203},3,null,[246],"代码","2022-12-04 15:42:19","pinia 简易入门指南",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad7bee555d-78.webp",{},true,"\u002Fposts\u002F2022\u002Fpinia-setup",{"text":256,"minutes":257,"time":258,"words":259},"3 min read",2.39,143400,478,{"title":5,"description":248},{"loc":254},"posts\u002F2022\u002Fpinia-setup",[22],"jXWBzLkNg2U9zk4vJlZ18dSmMxdNDjmqIM9X-KOihtg",[266,271],{"title":267,"path":268,"stem":269,"date":270,"type":244,"children":-1},"vite使用","\u002Fposts\u002F2022\u002Fvite-basic-use","posts\u002F2022\u002Fvite-basic-use","2022-12-04 15:41:11",{"title":272,"path":273,"stem":274,"date":275,"type":244,"children":-1},"Vue3 响应式系统","\u002Fposts\u002F2022\u002Fvue3-mini-core","posts\u002F2022\u002Fvue3-mini-core","2022-12-04 15:43:03",1789642596683]