{"id":1236,"date":"2024-04-15T10:58:10","date_gmt":"2024-04-15T02:58:10","guid":{"rendered":"http:\/\/ericw.top\/?p=1236"},"modified":"2024-04-25T08:21:08","modified_gmt":"2024-04-25T00:21:08","slug":"pinia-vue3%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e5%b7%a5%e5%85%b7","status":"publish","type":"post","link":"http:\/\/ericw.top\/?p=1236","title":{"rendered":"Pinia &#8211; Vue3\u72b6\u6001\u7ba1\u7406\u5de5\u5177"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"toc-0\">1. \u4ec0\u4e48\u662fPinia<\/h2>\n\n\n\n<p><a href=\"https:\/\/pinia.vuejs.org\/zh\/\">Pinia\u5b98\u7f51<\/a><\/p>\n\n\n\n<p>Pinia \u662f Vue \u7684\u4e13\u5c5e\u7684\u6700\u65b0\u72b6\u6001\u7ba1\u7406\u5e93 \uff0c\u662f Vuex \u72b6\u6001\u7ba1\u7406\u5de5\u5177\u7684\u66ff\u4ee3\u54c1 <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"316\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-27-1024x316.png\" alt=\"\" class=\"wp-image-1238\" style=\"width:755px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-27-1024x316.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-27-300x93.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-27-768x237.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-27.png 1139w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-1\">2. \u624b\u52a8\u6dfb\u52a0Pinia\u5230Vue\u9879\u76ee<\/h2>\n\n\n\n<p>\u540e\u9762\u5728\u5b9e\u9645\u5f00\u53d1\u9879\u76ee\u7684\u65f6\u5019\uff0cPinia\u53ef\u4ee5\u5728\u9879\u76ee\u521b\u5efa\u65f6\u81ea\u52a8\u6dfb\u52a0\uff0c\u73b0\u5728\u6211\u4eec\u521d\u6b21\u5b66\u4e60\uff0c\u4ece\u96f6\u5f00\u59cb\uff1a<\/p>\n\n\n\n<ol>\n<li>\u4f7f\u7528 Vite \u521b\u5efa\u4e00\u4e2a\u7a7a\u7684 Vue3\u9879\u76ee<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >npm init vite@latest<\/code><\/pre>\n\n\n\n<ol start=\"2\">\n<li>\u6309\u7167\u5b98\u65b9\u6587\u6863\u5b89\u88c5 pinia \u5230\u9879\u76ee\u4e2d<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-2\">3. Pinia\u57fa\u7840\u4f7f\u7528<\/h2>\n\n\n\n<ol>\n<li>\u5b9a\u4e49store<\/li>\n\n\n\n<li>\u7ec4\u4ef6\u4f7f\u7528store<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"321\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-28-1024x321.png\" alt=\"\" class=\"wp-image-1239\" style=\"width:766px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-28-1024x321.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-28-300x94.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-28-768x241.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-28-1536x481.png 1536w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-28.png 1621w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-3\">4. getters\u5b9e\u73b0<\/h2>\n\n\n\n<p>Pinia\u4e2d\u7684 getters \u76f4\u63a5\u4f7f\u7528 computed\u51fd\u6570 \u8fdb\u884c\u6a21\u62df, \u7ec4\u4ef6\u4e2d\u9700\u8981\u4f7f\u7528\u9700\u8981\u628a getters return\u51fa\u53bb<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"350\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-29-1024x350.png\" alt=\"\" class=\"wp-image-1240\" style=\"width:775px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-29-1024x350.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-29-300x103.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-29-768x263.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-29-1536x525.png 1536w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-29.png 1632w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-4\">5. action\u5f02\u6b65\u5b9e\u73b0<\/h2>\n\n\n\n<p>\u65b9\u5f0f\uff1a\u5f02\u6b65action\u51fd\u6570\u7684\u5199\u6cd5\u548c\u7ec4\u4ef6\u4e2d\u83b7\u53d6\u5f02\u6b65\u6570\u636e\u7684\u5199\u6cd5\u5b8c\u5168\u4e00\u81f4<\/p>\n\n\n\n<ul>\n<li>\u63a5\u53e3\u5730\u5740\uff1a<a href=\"http:\/\/geek.itheima.net\/v1_0\/channels\">http:\/\/geek.itheima.net\/v1_0\/channels<\/a><\/li>\n\n\n\n<li>\u8bf7\u6c42\u65b9\u5f0f\uff1aget<\/li>\n\n\n\n<li>\u8bf7\u6c42\u53c2\u6570\uff1a\u65e0<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"322\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-30-1024x322.png\" alt=\"\" class=\"wp-image-1241\" style=\"width:785px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-30-1024x322.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-30-300x94.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-30-768x241.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-30-1536x483.png 1536w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-30.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><img decoding=\"async\" src=\"\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-5\">6. storeToRefs\u5de5\u5177\u51fd\u6570<\/h2>\n\n\n\n<p>\u4f7f\u7528storeToRefs\u51fd\u6570\u53ef\u4ee5\u8f85\u52a9\u4fdd\u6301\u6570\u636e\uff08state + getter\uff09\u7684\u54cd\u5e94\u5f0f\u89e3\u6784 <\/p>\n\n\n\n<p><img decoding=\"async\" src=\"\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"478\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-31-1024x478.png\" alt=\"\" class=\"wp-image-1242\" style=\"width:782px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-31-1024x478.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-31-300x140.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-31-768x358.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-31-1536x716.png 1536w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-31.png 1593w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-6\">7. Pinia\u7684\u8c03\u8bd5<\/h2>\n\n\n\n<p>Vue\u5b98\u65b9\u7684 dev-tools \u8c03\u8bd5\u5de5\u5177 \u5bf9 Pinia\u76f4\u63a5\u652f\u6301\uff0c\u53ef\u4ee5\u76f4\u63a5\u8fdb\u884c\u8c03\u8bd5 <\/p>\n\n\n\n<p><img decoding=\"async\" src=\"\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"478\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-32-1024x478.png\" alt=\"\" class=\"wp-image-1243\" style=\"width:786px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-32-1024x478.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-32-300x140.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-32-768x358.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-32-1536x716.png 1536w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/04\/image-32.png 1651w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-7\">8. Pinia\u6301\u4e45\u5316\u63d2\u4ef6<\/h2>\n\n\n\n<p>\u5b98\u65b9\u6587\u6863\uff1a<a href=\"https:\/\/prazdevs.github.io\/pinia-plugin-persistedstate\/zh\/\">https:\/\/prazdevs.github.io\/pinia-plugin-persistedstate\/zh\/<\/a><\/p>\n\n\n\n<ol>\n<li>\u5b89\u88c5\u63d2\u4ef6 pinia-plugin-persistedstate<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >npm i pinia-plugin-persistedstate<\/code><\/pre>\n\n\n\n<ol start=\"2\">\n<li>\u4f7f\u7528 main.js<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >import persist from &#039;pinia-plugin-persistedstate&#039;&lt;br&gt;...&lt;br&gt;app.use(createPinia().use(persist))<\/code><\/pre>\n\n\n\n<ol start=\"3\">\n<li>\u914d\u7f6e store\/counter.js<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >import { defineStore } from &#039;pinia&#039;&lt;br&gt;import { computed, ref } from &#039;vue&#039;&lt;br&gt;\u200b&lt;br&gt;export const useCounterStore = defineStore(&#039;counter&#039;, () =&gt; {&lt;br&gt;&nbsp;...&lt;br&gt;&nbsp;return {&lt;br&gt;&nbsp; &nbsp;count,&lt;br&gt;&nbsp; &nbsp;doubleCount,&lt;br&gt;&nbsp; &nbsp;increment&lt;br&gt;}&lt;br&gt;}, {&lt;br&gt;&nbsp;persist: true&lt;br&gt;})<\/code><\/pre>\n\n\n\n<ol start=\"4\">\n<li>\u5176\u4ed6\u914d\u7f6e\uff0c\u770b\u5b98\u7f51\u6587\u6863\u5373\u53ef<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>1. \u4ec0\u4e48\u662fPinia Pinia\u5b98\u7f51 Pinia \u662f Vue \u7684\u4e13\u5c5e\u7684\u6700\u65b0\u72b6\u6001\u7ba1\u7406\u5e93 \uff0c\u662f Vuex \u72b6\u6001\u7ba1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1247,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"_links":{"self":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/1236"}],"collection":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1236"}],"version-history":[{"count":4,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/1236\/revisions"}],"predecessor-version":[{"id":1280,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/1236\/revisions\/1280"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/media\/1247"}],"wp:attachment":[{"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1236"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}