1import{_ as e,c as t,b as s,a as p,e as c,r as o,o as i}from"./app-BgYE7jZN.js";const l={};function u(r,n){const a=o("SocialBlock");return i(),t("div",null,[n[0]||(n[0]=s("h1",{id:"pinia-vuex-çå¾ç¹¼è ",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#pinia-vuex-çå¾ç¹¼è "},[s("span",null,"Pinia - Vuex çå¾ç¹¼è ")])],-1)),p(a,{hashtags:"vuejs3, pinia"}),n[1]||(n[1]=c(`<p>大家好ï¼ä»å¤©è¦ä¾ä»ç´¹ä¸æ¬¾ Vue ç State Management å¥ä»¶ - <a href="https://pinia.esm.dev/" target="_blank" rel="noopener noreferrer">Pinia</a>ï¼å³å°å¨ä¸ä¹ çå°ä¾ï¼ææ¯å·²ç¶ï¼è½å¤ å代 Vuexï¼çºä½é麼說å¢ï¼</p><h2 id="pinia-vs-vuex" tabindex="-1"><a class="header-anchor" href="#pinia-vs-vuex"><span>Pinia vs. Vuex</span></a></h2><p>é¦å å¯ä»¥çç <a href="https://pinia.esm.dev/introduction.html#comparison-with-vuex-3-x-4-x" target="_blank" rel="noopener noreferrer">Pinia å®ç¶²å°æ¯ Vuex</a> çç°¡è¦æè¿°å¦ä¸</p><ul><li>ç§»é¤ Mutations</li><li>Typescript ä¸åéè¦å¤é¤ç types ä¾å è£</li><li>ä¸åéè¦å¼å ¥å種 magic stringï¼ç´æ¥å¼å ¥å½æ¸ï¼äº«åèªåè£å ¨å¸¶ä¾çå¿«æ¨</li><li>ä¸åéè¦åæ 註å模çµï¼é è¨é½æ¯åæ 註å</li><li>ææ£ Nested Moduleï¼å¨ä¿æ模çµäºç¸å¼å ¥çåæä¸ï¼æ¡ç¨ Flat Moduleï¼çè³å¯ä»¥é²è¡ <code>circular dependencies</code> è®å ©æ¨¡çµäºç¸èª¿ç¨ï¼é注æå¯è½ç¢çç¡éè¿´åï¼</li><li>ç¡é namespacedï¼ææ模çµé½å·²èªå namespaced</li></ul><p>çå°éæ¯ä¸æ¯å¾è奮ï¼é·ä¹ 以ä¾è¢«è©¬ç ç mutations å± ç¶ç§»é¤æï½å ¶å¯¦ä½è å°±æ¯ç¶éå¤æ¹çç¨æ¶åé¥å¾æ±ºå®éäºæ¹åï¼æ¥ä¸ä¾ä¸èµ·ä¾ççå ·é«è©²æ麼ç¨å§</p><h2 id="install" tabindex="-1"><a class="header-anchor" href="#install"><span>Install</span></a></h2><ol><li>å®è£ pinia</li></ol><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line">$ <span class="token function">yarn</span> <span class="token function">add</span> pinia</span> 2<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><ol start="2"><li>åµå»º pinia</li></ol><p>è Vuex ä¸åï¼å çº pinia æ¯é è¨åæ åµå»ºæ¨¡çµï¼æåå¯ä»¥å 註åå® app å¾åä¾å¯«æ¨¡çµå ·é«å §å®¹</p><p><strong>store/index.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 3<span class="line"></span> 4<span class="line"><span class="token comment">// åµå»º pinia</span></span> 5<span class="line"><span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 6<span class="line"></span> 7<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> pinia<span class="token punctuation">;</span></span> 8<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>é注æï¼Vue2 使ç¨æéè¦é¡å¤å¼å ¥ <code>PiniaVuePlugin</code>ï¼å ·é«å¦ä¸</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia<span class="token punctuation">,</span> PiniaVuePlugin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 9<span class="line"></span> 10<span class="line">Vue<span class="token punctuation">.</span><span class="token function">
10use</span><span class="token punctuation">(</span>PiniaVuePlugin<span class="token punctuation">)</span><span class="token punctuation">;</span></span> 11<span class="line"><span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 12<span class="line"></span> 13<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> pinia<span class="token punctuation">;</span></span> 14<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>å¦å¤å¦æä½ ç Vue2 åºå±¤æ¯ä½¿ç¨ webpack ç話ï¼éè¦å¨ module ç rules è£æ·»å å¦ä¸è¦åï¼å¦åæåºç¾ esmodule å¼å ¥çé¯èª¤ï¼è©³ç´°å¯<a href="https://github.com/polkadot-js/extension/issues/621#issuecomment-759341776" target="_blank" rel="noopener noreferrer">åèééè¨è«</a></p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span> 15<span class="line"> <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 16<span class="line"> <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span></span> 17<span class="line"> <span class="token comment">// FIX: Canât import the named export 'XXX' from non EcmaScript module</span></span> 18<span class="line"> <span class="token punctuation">{</span></span> 19<span class="line"> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\.mjs$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span></span> 20<span class="line"> <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span></span> 21<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'javascript/auto'</span><span class="token punctuation">,</span></span> 22<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 23<span class="line"> <span class="token punctuation">]</span></span> 24<span class="line"> <span class="token punctuation">}</span></span> 25<span class="line"><span class="token punctuation">}</span></span> 26<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>main.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">
26import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span> 27<span class="line"><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span><span class="token punctuation">;</span></span> 28<span class="line"><span class="token keyword">import</span> pinia <span class="token keyword">from</span> <span class="token string">'./store'</span><span class="token punctuation">;</span></span> 29<span class="line"></span> 30<span class="line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span></span> 31<span class="line"></span> 32<span class="line"><span class="token comment">// ç¶å® pinia å° app</span></span> 33<span class="line">app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span><span class="token punctuation">;</span></span> 34<span class="line"></span> 35<span class="line">app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 36<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Vue2 註åæ¹å¼åè· vuex ç¸å</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span> 37<span class="line"><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span><span class="token punctuation">;</span></span> 38<span class="line"><span class="token keyword">import</span> pinia <span class="token keyword">from</span> <span class="token string">'./store'</span><span class="token punctuation">;</span></span> 39<span class="line"></span> 40<span class="line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span> 41<span class="line"> pinia<span class="token punctuation">,</span></span> 42<span class="line"> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">h</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">,</span></span> 43<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 44<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>åµå»º Module</li></ol><p>å¼å ¥ <code>defineStore</code> æ¹æ³ï¼Options è Vuex é¤äº mutations 以å¤åºæ¬ç¸åï¼å å« <code>state</code>, <code>getters</code>, <code>actions</code></p><p><strong>store/main.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">
44import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 45<span class="line"></span> 46<span class="line"><span class="token comment">// éé defineStore æèªååæ 註å模çµï¼åå³å¼çº hook function</span></span> 47<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> useStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'Main'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span> 48<span class="line"> <span class="token comment">// 注æ state æ¯ä¸å functionï¼æ¨è¦ä½¿ç¨ arrow function</span></span> 49<span class="line"> <span class="token comment">// å¯å¹«å© typescript æ´å¥½é²è¡é¡åæ¨æ·</span></span> 50<span class="line"> <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span> 51<span class="line"> <span class="token literal-property property">APILoading</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span> 52<span class="line"> <span class="token literal-property property">counter</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span> 53<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 54<span class="line"> <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 55<span class="line"> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 56<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span> 57<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usage-çµä»¶å §ä½¿ç¨" tabindex="-1"><a class="header-anchor" href="#usage-çµä»¶å §ä½¿ç¨"><span>Usage çµä»¶å §ä½¿ç¨</span></a></h2><p>ééå 以 vue3 çºä½¿ç¨ç¯ä¾</p><h3 id="state" tabindex="-1"><a class="header-anchor" href="#state"><span>State</span></a></h3><p><strong>App.vue</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token comment">// å¼å ¥ defineStore åå³ç hook</span></span> 58<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/main'</span><span class="token punctuation">;</span></span> 59<span class="line"></span> 60<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 61<span class="line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 62<span class="line"> <span class="token comment">// store ç©ä»¶æ¯ reactiveï¼æ³¨æä¸å¯ç´æ¥è§£æ§</span></span> 63<span class="line"> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 64<span class="line"></span> 65<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span> 66<span class="line"> store<span class="token punctuation">,</span></span> 67<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span> 68<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 69<span class="line"><span class="token punctuation">}</span></span> 70<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="解æ§-store" tabindex="-1"><a class="header-anchor" href="#解æ§-store"><span><strong>è§£æ§ store</strong></span></a></h4><p>å çº store æ¯å reactive ç©ä»¶ï¼å¦æéè¦è§£æ§ï¼å¯ä½¿ç¨ <code>storeToRefs</code> é²è¡è§£æ§</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">
70import</span> <span class="token punctuation">{</span> storeToRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 71<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/main'</span><span class="token punctuation">;</span></span> 72<span class="line"></span> 73<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 74<span class="line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 75<span class="line"> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 76<span class="line"></span> 77<span class="line"> <span class="token comment">// refs</span></span> 78<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> APILoading <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">storeToRefs</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span><span class="token punctuation">;</span></span> 79<span class="line"></span> 80<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span> 81<span class="line"> APILoading<span class="token punctuation">,</span></span> 82<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span> 83<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 84<span class="line"><span class="token punctuation">}</span></span> 85<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="options-api-support" tabindex="-1"><a class="header-anchor" href="#options-api-support"><span><strong>Options API Support</strong></span></a></h4><p>å¼å ¥ <code>mapState</code> å¯ä»¥å Vuex ä¸æ¨£è¨»åå° options APIï¼ä½ä¸ç¨ magic stringï¼èæ¯æ³¨å ¥ hook function å³å¯</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 86<span class="line"><span class="token comment">// å¼å ¥ hook</span></span> 87<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/main'</span><span class="token punctuation">;</span></span> 88<span class="line"></span> 89<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 90<span class="line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 91<span class="line"> <span class="token comment">// å¯éé this.counter åå¾çæ </span></span> 92<span class="line"> <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'counter'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 93<span class="line"> <span class="token comment">// èä¸æ¹ç¸åï¼ä½è¨»åçº this.storeCounter</span></span> 94<span class="line"> <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useStore<span class="token punctuation">,</span> <span class="token punctuation">{</span></span> 95<span class="line">
95 <span class="token literal-property property">storeCounter</span><span class="token operator">:</span> <span class="token string">'counter'</span><span class="token punctuation">,</span></span> 96<span class="line"> <span class="token comment">// ä¹å¯ä»¥ function ç´æ¥åå¾ store é²è¡è¤éèç</span></span> 97<span class="line"> <span class="token function-variable function">double</span><span class="token operator">:</span> <span class="token parameter">store</span> <span class="token operator">=></span> store<span class="token punctuation">.</span>counter <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">,</span></span> 98<span class="line"> <span class="token comment">// ä¸æ¨£å¯æ£ç¢ºè¨»åï¼ä½ typescript æç¡æ³æ£ç¢ºèªåæ¨æ·é¡å</span></span> 99<span class="line"> <span class="token function">magicValue</span><span class="token punctuation">(</span><span class="token parameter">store</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 100<span class="line"> <span class="token keyword">return</span> store<span class="token punctuation">.</span>someGetter <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>counter <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>double<span class="token punctuation">;</span></span> 101<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 102<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 103<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 104<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span> 105<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>å¦æéè¦å¯å¨ store å¤é¨æ¹è® state æï¼ä¾å¦ä½ å¨å表å®ï¼ï¼å¯ä»¥ä½¿ç¨ <code>mapWritableState</code>ï¼ä½ç¡æ³ä½¿ç¨ function çæ¹å¼è¨»å</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapWritableState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 106<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/main'</span><span class="token punctuation">;</span></span> 107<span class="line"></span> 108<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 109<span class="line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 110<span class="line"> <span class="token comment">// this.counter++</span></span> 111<span class="line"> <span class="token operator">...</span><span class="token function">mapWritableState</span><span class="token punctuation">(</span>useStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'counter'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 112<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 113<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span> 114<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="patch-æ¹åçæ " tabindex="-1"><a class="header-anchor" href="#patch-æ¹åçæ "><span>$patch æ¹åçæ </span></a></h4><p>æ¯èµ·ç´æ¥ä¿®æ¹çæ ï¼ä¹å¯ä»¥éé $patch çµ±ä¸é²è¡çæ ä¿®æ¹</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line">store<span class="token punctuation">.</span><span class="token function">$patch</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span> 115<span class="line"> <span class="token literal-property property">counter</span><span class="token operator">:</span> store<span class="token punctuation">.</span>counter <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span></span> 116<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span> 117<span class="line"><span class="token comment">// or</span></span> 118<span class="line">store<span class="token punctuation">.</span><span class="token function">$patch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 119<span class="line">
119 state<span class="token punctuation">.</span>counter <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span></span> 120<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span> 121<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="getters" tabindex="-1"><a class="header-anchor" href="#getters"><span>Getters</span></a></h3><p>getters è Vuex ç¸åï¼ç¬¬ä¸å args çº state</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> useStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span> 122<span class="line"> <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span> 123<span class="line"> <span class="token literal-property property">counter</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span> 124<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 125<span class="line"> <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 126<span class="line"> <span class="token comment">// å¯ç¨ç®é å½æ¸</span></span> 127<span class="line"> <span class="token function-variable function">doubleCount</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>counter <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">,</span></span> 128<span class="line"> <span class="token comment">// this æå store æ¬èº«</span></span> 129<span class="line"> <span class="token function">doubleCountPlusOne</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 130<span class="line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>doubleCount <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span></span> 131<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 132<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 133<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 134<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>çµä»¶å §ä½¿ç¨å¯ç´æ¥éé store æ¿</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 135<span class="line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 136<span class="line"> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 137<span class="line"></span> 138<span class="line"> store<span class="token punctuation">.</span>counter <span class="token operator">=</span> <span class="token number">3</span></span> 139<span class="line"> store<span class="token punctuation">.</span>doubleCount <span class="token comment">// 6</span></span> 140<span class="line"> <span class="token punctuation">}</span></span> 141<span class="line"><span class="token punctuation">}</span></span> 142<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="options-api-support-1" tabindex="-1"><a class="header-anchor" href="#options-api-support-1"><span><strong>Options API Support</strong></span></a></h4><p>ä¸æ¨£ä½¿ç¨ <code>mapState</code> å¨ options ä¸è¨»å getters</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">
142import</span> <span class="token punctuation">{</span> mapState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 143<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/main'</span><span class="token punctuation">;</span></span> 144<span class="line"></span> 145<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 146<span class="line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 147<span class="line"> <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'doubleCount'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 148<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 149<span class="line"><span class="token punctuation">}</span></span> 150<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="actions" tabindex="-1"><a class="header-anchor" href="#actions"><span>Actions</span></a></h3><p>actions å°±åçµä»¶ä¸ç methodsï¼ä¸æ¯æ´ async functionï¼è· state, getters ç¸åï¼éé <code>this</code> å¯ä»¥èª¿ç¨åå¾</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> useStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span> 151<span class="line"> <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span> 152<span class="line"> <span class="token literal-property property">counter</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span> 153<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 154<span class="line"> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 155<span class="line"> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 156<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>counter<span class="token operator">++</span><span class="token punctuation">;</span></span> 157<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 158<span class="line"> <span class="token function">randomizeCounter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 159<span class="line">
159 <span class="token keyword">this</span><span class="token punctuation">.</span>counter <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">100</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 160<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 161<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 162<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span> 163<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="調ç¨" tabindex="-1"><a class="header-anchor" href="#調ç¨"><span><strong>調ç¨</strong></span></a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/main'</span><span class="token punctuation">;</span></span> 164<span class="line"></span> 165<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 166<span class="line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 167<span class="line"> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 168<span class="line"> store<span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 169<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 170<span class="line"><span class="token punctuation">}</span></span> 171<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="options-api-support-2" tabindex="-1"><a class="header-anchor" href="#options-api-support-2"><span><strong>Options API Support</strong></span></a></h4><p>è Vuex ç¸åå¯éé <code>mapActions</code> 註å</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapActions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 172<span class="line"><span class="token keyword">
172import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/main'</span><span class="token punctuation">;</span></span> 173<span class="line"></span> 174<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 175<span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 176<span class="line"> <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span>useStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'increment'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 177<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 178<span class="line"><span class="token punctuation">}</span></span> 179<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="subscribe-actions" tabindex="-1"><a class="header-anchor" href="#subscribe-actions"><span><strong>Subscribe actions</strong></span></a></h4><p>å¯ä½¿ç¨ <code>$onAction</code> ç£è½ action ç調ç¨ï¼è©³ç´°å¯åè<a href="https://pinia.esm.dev/core-concepts/actions.html#subscribing-to-actions" target="_blank" rel="noopener noreferrer">å®æ¹èªªæ</a></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token comment">// åå³ unsubscribe å½æ¸</span></span> 180<span class="line"><span class="token keyword">const</span> unsubscribe <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">$onAction</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> after<span class="token punctuation">,</span> onError <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 181<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>name <span class="token operator">===</span> <span class="token string">'increment'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 182<span class="line"> <span class="token keyword">const</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 183<span class="line"></span> 184<span class="line"> <span class="token comment">// after æå¨ action 調ç¨å®å ¨è¿åå¾æå·è¡</span></span> 185<span class="line"> <span class="token comment">// æçå¾ ææåå³ç promise</span></span> 186<span class="line"> <span class="token function">after</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 187<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span></span> 188<span class="line">
188 <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">Finished "</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" after </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span></span> 189<span class="line"> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> startTime</span> 190<span class="line"> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">ms.\\nResult: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>result<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">\`</span></span></span> 191<span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span> 192<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 193<span class="line"></span> 194<span class="line"> <span class="token comment">// onError æå¨ action å ±é¯æ調ç¨</span></span> 195<span class="line"> <span class="token function">onError</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 196<span class="line"> console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span></span> 197<span class="line"> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">Failed "</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" after </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> startTime<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">ms.\\nError: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>error<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">\`</span></span></span> 198<span class="line"> <span class="token punctuation">)</span></span> 199<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span> 200<span class="line"> <span class="token punctuation">}</span></span> 201<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span> 202<span class="line"></span> 203<span class="line"><span class="token comment">// å¯æå移é¤ç£è½</span></span> 204<span class="line"><span class="token function">unsubscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 205<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>
205å¦æå¨çµä»¶ä¸èª¿ç¨ $onActionï¼åé è¨æå¨çµä»¶ unmounted æ移é¤ç£è½ï¼å¦æè¦ç¶æä¸è¢«ç§»é¤ï¼åå¯ä»¥å³å ¥ç¬¬äºååæ¸çº <code>true</code>ï¼å該 subscribe å°ä¸è¢«èªå移é¤</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 206<span class="line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 207<span class="line"> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span> 208<span class="line"></span> 209<span class="line"> <span class="token comment">// éå subscription å¨ component unmounted å¾ä»æ被ä¿æ</span></span> 210<span class="line"> store<span class="token punctuation">.</span><span class="token function">$onAction</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span></span> 211<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 212<span class="line"><span class="token punctuation">}</span></span> 213<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usage-çµä»¶å¤ä½¿ç¨" tabindex="-1"><a class="header-anchor" href="#usage-çµä»¶å¤ä½¿ç¨"><span>Usage çµä»¶å¤ä½¿ç¨</span></a></h2><p>çµä»¶å¤ä½¿ç¨é ç¹å¥æ³¨æ調ç¨ææ©ï¼ç±æ¼ pinia ç store å®å ¨ä¾è³´ä¸»æ ¸å¿ pinia çå®è£ï¼éè¦ç¢ºä¿ææ store hook 調ç¨å¨ pinia 註åå¨ app å¾</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> pinia <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 214<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span> 215<span class="line"><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span><span class="token punctuation">;</span></span> 216<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/main'</span><span class="token punctuation">;</span></span> 217<span class="line"></span> 218<span class="line"><span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 219<span class="line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span></span> 220<span class="line"></span> 221<span class="line"><span class="token comment">// å 註å</span></span> 222<span class="line">app<span class="token punctuation">.</span><span class="token function">
222use</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span><span class="token punctuation">;</span></span> 223<span class="line"></span> 224<span class="line"><span class="token comment">// å¾èª¿ç¨</span></span> 225<span class="line"><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 226<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>ä½å»æèçé種調ç¨ææ©æ¯é常累人çï¼å»ºè°é½ä¸å¾å¨å½æ¸ function ä¸èª¿ç¨å³å¯ä¿è pinia æ£ç¢ºå®è£å®æ</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</span></span> 227<span class="line"></span> 228<span class="line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span> 229<span class="line"> <span class="token comment">// ...</span></span> 230<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 231<span class="line"></span> 232<span class="line"><span class="token comment">// X: å¨å½æ¸å¤èª¿ç¨</span></span> 233<span class="line"><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 234<span class="line"></span> 235<span class="line">router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 236<span class="line"> <span class="token comment">// O: å¨å½æ¸ä¸èª¿ç¨</span></span> 237<span class="line"> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 238<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span> 239<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="circular-dependency" tabindex="-1"><a class="header-anchor" href="#circular-dependency"><span>Circular Dependency</span></a></h3><p>大é¨åå ´æ¯ä¸éæ¯æçæçï¼ä½ pinia è®å ©åçµä»¶ä¹éå¯ä»¥å½¼æ¤èª¿ç¨ï¼åªæ¯éè¦ç¹å¥æ³¨æå¯è½ç side effectï¼ä¸è¦åæå¼å«å½¼æ¤å ·æä¾è³´éä¿ç action, getter å°±æ²åé¡</p><p><strong>store/main.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">
239import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 240<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useCount <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./count'</span><span class="token punctuation">;</span></span> 241<span class="line"></span> 242<span class="line"><span class="token comment">// X: é裡å¼å« hook æå´æï¼å çº pinia å°æªè¨»åå¨ app ä¸</span></span> 243<span class="line"><span class="token keyword">const</span> Count <span class="token operator">=</span> <span class="token function">useCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 244<span class="line"></span> 245<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> useMain <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span> 246<span class="line"> <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span> 247<span class="line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Main'</span><span class="token punctuation">,</span></span> 248<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 249<span class="line"> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 250<span class="line"> <span class="token function">showName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 251<span class="line"> <span class="token comment">// O: å¨ action ä¸èª¿ç¨</span></span> 252<span class="line"> <span class="token keyword">const</span> Count <span class="token operator">=</span> <span class="token function">useCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 253<span class="line"> Count<span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token comment">// Count</span></span> 254<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 255<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 256<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 257<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>store/count.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">
257import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span></span> 258<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useMain <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./main'</span><span class="token punctuation">;</span></span> 259<span class="line"></span> 260<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> useMain <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'count'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span> 261<span class="line"> <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span> 262<span class="line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Count'</span></span> 263<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 264<span class="line"> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 265<span class="line"> <span class="token function">showName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 266<span class="line"> <span class="token keyword">const</span> Main <span class="token operator">=</span> <span class="token function">useMain</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 267<span class="line"> Main<span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token comment">// Main</span></span> 268<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 269<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 270<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 271<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="composing-store" tabindex="-1"><a class="header-anchor" href="#composing-store"><span>Composing Store</span></a></h2><p>Pinia 建ç«æ¨¡çµçæ¹å¼ï¼é¤äºå³çµ±ç Vuex Options 模å¼å¤ï¼éæä¾äºåç Vue3 ç Composition 模å¼</p><p>使ç¨æ¹å¼å¾ç°¡å®ï¼æåæ¬ Options çåæ¸æ¹ç± function å³å ¥ï¼ä¸¦å¨æå¾åå³æææ±è¥¿å³å¯ï¼å°±åå¨çµä»¶ä¸ä
271½¿ç¨ setup å½æ¸ä¸æ¨£ï¼é種寫æ³æä¾äºæ´çºå½æ§çç·¨å¯«é¢¨æ ¼ï¼å¯ä»¥æ大åçæ 管ççé活度ï¼ç¼ºé»ä¹æ¯é¡¯èæè¦çï¼ä¸ç¶ä½¿ç¨ææ¯æå¯è½æé æç¶è·ä¸å¯«æ³çæ··äº</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">const</span> useStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 272<span class="line"> <span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 273<span class="line"></span> 274<span class="line"> <span class="token keyword">function</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 275<span class="line"> counter<span class="token punctuation">.</span>value <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span></span> 276<span class="line"> <span class="token punctuation">}</span></span> 277<span class="line"></span> 278<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span> 279<span class="line"> counter<span class="token punctuation">,</span></span> 280<span class="line"> increment<span class="token punctuation">,</span></span> 281<span class="line"> <span class="token punctuation">}</span></span> 282<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span> 283<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>é種寫æ³éè¦ç¹å¥æ³¨æç¶æ¨¡çµå½¼æ¤èª¿ç¨æçæ æ³</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">const</span> useA <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 284<span class="line"> <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">useB</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 285<span class="line"></span> 286<span class="line"> <span class="token comment">// X: æ¤èæå ±é¯ï¼å çº b 裡ä¹åæè®åäº a.name</span></span> 287<span class="line"> b<span class="token punctuation">.</span>name<span class="token punctuation">;</span></span> 288<span class="line"></span> 289<span class="line"> <span class="token keyword">function</span> <span class="token function">showName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 290<span class="line"> <span class="token comment">// O: å¨ actions æ getters ä¸è®åæ¯æ²åé¡ç</span></span> 291<span class="line"> <span class="token keyword">const</span> bName <span class="token operator">=</span> b<span class="token punctuation">.</span>name<span class="token punctuation">;</span></span> 292<span class="line"> <span class="token punctuation">}</span></span> 293<span class="line"></span> 294<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span> 295<span class="line"> <span class="token literal-property property">
295name</span><span class="token operator">:</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'I am A'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 296<span class="line"> <span class="token punctuation">}</span></span> 297<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 298<span class="line"></span> 299<span class="line"><span class="token keyword">const</span> useB <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 300<span class="line"> <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token function">useA</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 301<span class="line"></span> 302<span class="line"> <span class="token comment">// X: æ¤èæå ±é¯ï¼å çº a 裡ä¹åæè®åäº b.name</span></span> 303<span class="line"> a<span class="token punctuation">.</span>name<span class="token punctuation">;</span></span> 304<span class="line"></span> 305<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span> 306<span class="line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'I am B'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> 307<span class="line"> <span class="token punctuation">}</span></span> 308<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 309<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>以ä¸å°±æ¯æ¬æ¬¡éç®± Pinia ç主è¦åè½ï¼é²å ¥ v2.0.0 å¾å §é¨å¼ç¨ vue-demi æ£å¼åææ¯æ´ Vue2, Vue3ï¼éç¶ç¥å度å°ä¸å¦ç®å Vuexï¼ä½ç¸ä¿¡ä¸ä¹ å¾ Pinia å°ææ£å¼è¢«æ¨è¦å代 Vuex</p><p>ä¸æ¬¡è¦æï½=V=</p>`,80)),p(a,{hashtags:"vuejs3, pinia"})])}const k=e(l,[["render",u]]),v=JSON.parse('{"path":"/articles/js/pinia-intro.html","title":"Pinia - Vuex çå¾ç¹¼è ","lang":"zh-TW","frontmatter":{},"git":{"updatedTime":1748788505000,"contributors":[{"name":"johnnywang1994","username":"johnnywang1994","email":"[email protected]","commits":5,"url":"https://github.com/johnnywang1994"},{"name":"Lindy Liao","username":"","email":"[email protected]","commits":1}],"changelog":[{"hash":"f01bfa128b4d33fbeddb8abb1697b5391b273d28","time":1748788505000,"email":"[email protected]","author":"Lindy Liao","message":"UPD"},{"hash":"71ccb7693345c8ddc2f554e00f8a0ce73af2b783","time":1648521821000,"email":"[email protected]","author":"johnnywang1994","message":"UPD: upgrade to v2"},{"hash":"69c4efa0ab4c842f52cc47c6a4423269c161e3af","time":1642582868000,"email":"[email protected]","author":"johnnywang1994","message":"UPD: update pinia vue2 hint"},{"hash":"da1521dcf805739a83e5efa4e52581013a51dcad","time":1638541816000,"email":"[email protected]","author":"johnnywang1994","message":"UPD: update sociallinks"},{"hash":"5462f39c3447f0f8414e62396aeb3bb3de51884d","time":1638540999000,"email":"[email protected]","author":"johnnywang1994","message":"UPD: add share-social"},{"hash":"c4ca9580ccb32721836c623a0d54209378966997","time":1637824964000,"email":"[email protected]","author":"johnnywang1994","message":"UPD: add pinia-intro"}]},"filePathRelative":"articles/js/pinia-intro.md"}');export{k as comp,v as data};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.