buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 20:51:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
d6a86a791a784be026dddfcdde19753f59b11bbf
reference/docs/pinia.html
jaywcjlove 021dcc57aa website: update touch-icon. 7fb6ce9190
2024-10-14 20:17:05 +00:00

342 lines
68 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>Pinia 备忘清单
&#x26; pinia cheatsheet &#x26; Quick Reference</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta description="这是一份 Pinia 状态管理库的备忘单，列出了 Pinia 的常用命令和操作。
入门，为开发人员分享快速参考备忘单。">
<meta keywords="pinia,reference,Quick,Reference,cheatsheet,cheat,sheet">
<meta name="author" content="jaywcjlove">
<meta name="license" content="MIT">
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
<link href="../style/style.css" rel="stylesheet">
<link href="../style/katex.css" rel="stylesheet">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/pinia.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="../js/dark.js?v=1.8.0"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="pinia-备忘清单"><svg viewBox="0 0 256 331" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em"><defs><linearGradient id="a" x1="55.342%" x2="42.817%" y1="0%" y2="42.863%"><stop offset="0%" stop-color="#52CE63"></stop><stop offset="100%" stop-color="#51A256"></stop></linearGradient><linearGradient id="b" x1="55.349%" x2="42.808%" y1="0%" y2="42.863%"><stop offset="0%" stop-color="#52CE63"></stop><stop offset="100%" stop-color="#51A256"></stop></linearGradient><linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="58.811%"><stop offset="0%" stop-color="#8AE99C"></stop><stop offset="100%" stop-color="#52CE63"></stop></linearGradient><linearGradient id="d" x1="51.378%" x2="44.585%" y1="17.473%" y2="100%"><stop offset="0%" stop-color="#FFE56C"></stop><stop offset="100%" stop-color="#FFC63A"></stop></linearGradient></defs><path fill="url(#a)" d="M67.56 173.328c30.366-2.985 41.08-27.648 44.735-64.823 3.654-37.175-21.174-70.814-31.502-69.799-10.328 1.015-43.15 40.322-46.805 77.497-3.654 37.175 3.205 60.11 33.572 57.125Z" transform="rotate(-38 72.877 106.136)"></path><path fill="url(#b)" d="M184.454 186.277c30.367 2.986 36.394-20.032 32.74-57.207-3.655-37.175-35.645-76.4-45.973-77.415-10.328-1.015-35.989 32.542-32.334 69.717 3.654 37.175 15.201 61.92 45.567 64.905Z" transform="rotate(52 178.34 119.085)"></path><path fill="url(#c)" d="M129.232 151.601c27.341 0 34.878-26.184 34.878-67.013 0-40.83-25.579-80.843-34.878-80.843S93.605 43.758 93.605 84.588c0 40.829 8.286 67.013 35.627 67.013Z" transform="rotate(7 128.858 77.673)"></path><path fill="url(#d)" d="M113.386 330.307c56.896 0 103.038-16.528 103.038-91.482 0-74.955-46.142-136.462-103.038-136.462-56.897 0-103.002 61.507-103.002 136.462 0 74.954 46.105 91.482 103.002 91.482Z"></path><ellipse cx="165.427" cy="216.677" fill="#EAADCC" rx="14.717" ry="6.845"></ellipse><ellipse cx="57.273" cy="212.57" fill="#EAADCC" rx="14.717" ry="6.845" transform="rotate(7 57.273 212.57)"></ellipse><path d="M96.266 210.285a2.054 2.054 0 1 0-3.406 2.295c3.151 4.676 7.997 7.39 14.373 8.119 6.348.725 12.016-.902 16.877-4.852a2.054 2.054 0 1 0-2.59-3.187c-3.999 3.249-8.563 4.559-13.82 3.958-5.23-.598-8.986-2.7-11.434-6.333ZM65.818 178.63a14.672 14.672 0 0 1 10.551 3.945 14.67 14.67 0 0 1 4.672 10.25 14.671 14.671 0 0 1-3.945 10.55 14.672 14.672 0 0 1-10.25 4.672 14.67 14.67 0 0 1-10.551-3.945 14.672 14.672 0 0 1-4.67-10.25 14.67 14.67 0 0 1 3.944-10.55 14.67 14.67 0 0 1 10.249-4.672Z"></path><path fill="#FFF" d="M66.59 190.932a4.792 4.792 0 1 0-9.578.336 4.792 4.792 0 0 0 9.579-.336Z"></path><path d="M154.99 182.366a14.671 14.671 0 0 1 10.552 3.944 14.67 14.67 0 0 1 4.67 10.25 14.672 14.672 0 0 1-3.944 10.551 14.67 14.67 0 0 1-10.25 4.671 14.671 14.671 0 0 1-10.55-3.945 14.671 14.671 0 0 1-4.672-10.25 14.67 14.67 0 0 1 3.945-10.55 14.671 14.671 0 0 1 10.25-4.671Z"></path><path fill="#FFF" d="M65.71 175.552c9.824-.343 18.066 7.342 18.409 17.165.343 9.824-7.342 18.065-17.166 18.408-9.824.343-18.064-7.342-18.407-17.166-.343-9.823 7.341-18.064 17.164-18.407Zm12.252 17.38c-.224-6.423-5.613-11.448-12.037-11.223-6.422.224-11.447 5.612-11.222 12.035.224 6.424 5.612 11.448 12.035 11.224 6.423-.224 11.448-5.612 11.224-12.036ZM154.883 179.287c9.824-.343 18.065 7.342 18.408 17.165.343 9.824-7.342 18.065-17.165 18.408-9.824.343-18.065-7.342-18.408-17.165-.343-9.824 7.342-18.065 17.165-18.408Zm12.251 17.38c-.224-6.423-5.612-11.447-12.036-11.223-6.423.224-11.448 5.613-11.223 12.036.224 6.423 5.612 11.448 12.035 11.224 6.424-.225 11.448-5.613 11.224-12.037Z"></path><path fill="#FFF" d="M155.763 194.668a4.792 4.792 0 1 0-9.578.335 4.792 4.792 0 0 0 9.578-.335Z"></path><path fill="#ECB732" d="m38.083 243.16 22.33 23.235 16.022-17.044a3.765 3.765 0 0 1 5.486 5.157l-16.283 17.324 23.1 24.036a3.765 3.765 0 1 1-5.43 5.218l-22.834-23.761-10.725 11.41a3.765 3.765 0 1 1-5.486-5.158l10.986-11.688-22.595-23.511a3.765 3.765 0 1 1 5.43-5.218ZM188.04 243.16a3.765 3.765 0 1 1 5.429 5.218l-22.596 23.511 10.988 11.688a3.765 3.765 0 0 1-.042 5.201l-.123.121a3.765 3.765 0 0 1-5.322-.165l-10.725-11.41-22.834 23.762a3.765 3.765 0 0 1-5.197.222l-.127-.116a3.765 3.765 0 0 1-.105-5.324l23.1-24.036-16.284-17.324a3.765 3.765 0 0 1 .042-5.2l.123-.121a3.765 3.765 0 0 1 5.321.164l16.021 17.044 22.331-23.235Z"></path><path fill="#FFC73B" d="M136.602 126.74a3.765 3.765 0 0 1 0 5.323l-17.53 17.531 10.684 10.686a3.765 3.765 0 0 1 .12 5.2l-.12.125a3.765 3.765 0 0 1-5.324 0l-10.686-10.686-10.686 10.686a3.765 3.765 0 1 1-5.324-5.325l10.685-10.686-17.53-17.53a3.765 3.765 0 0 1-.12-5.2l.12-.125a3.765 3.765 0 0 1 5.324 0l17.531 17.53 17.531-17.53a3.765 3.765 0 0 1 5.325 0Z"></path></svg><a aria-hidden="true" tabindex="-1" href="#pinia-备忘清单"><span class="icon icon-link"></span></a>Pinia 备忘清单</h1><div class="wrap-body">
<p>这是一份 <a href="https://pinia.vuejs.org/"><code>Pinia</code></a> 状态管理库的备忘单，列出了 Pinia 的常用命令和操作。</p>
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#安装-pinia">安装 Pinia</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定义-store">定义 Store</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建-pinia-实例">创建 Pinia 实例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#热重载-store">热重载 Store</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-store">使用 Store</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#modules-模式">Modules 模式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-options-api">使用 Options API</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#高级用法">高级用法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用组合函数">使用组合函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#插件">插件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#持久化状态">持久化状态</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#1-安装--pinia-plugin-persist">1. 安装 pinia-plugin-persist</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#2-配置-pinia-和-pinia-plugin-persist">2. 配置 Pinia 和 pinia-plugin-persist</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#3-创建-store-并启用持久化">3. 创建 Store 并启用持久化</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#4-使用-store">4. 使用 Store</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#ssr-支持">SSR 支持</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-vue-devtools">使用 Vue Devtools</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用异步-actions">使用异步 Actions</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#测试-pinia-store">测试 Pinia Store</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="安装-pinia"><a aria-hidden="true" tabindex="-1" href="#安装-pinia"><span class="icon icon-link"></span></a>安装 Pinia</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span> <span class="token function">install</span> pinia
</span><span class="code-line"><span class="token comment"># or</span>
</span><span class="code-line"><span class="token function">yarn</span> <span class="token function">add</span> pinia
</span><span class="code-line"><span class="token comment"># or</span>
</span><span class="code-line"><span class="token function">pnpm</span> <span class="token function">add</span> pinia
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="定义-store"><a aria-hidden="true" tabindex="-1" href="#定义-store"><span class="icon icon-link"></span></a>定义 Store</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<p>创建一个 store 文件（例如 <code>src/stores/counter.js</code>），并定义 <code>store</code></p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> useCounterStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'counter'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-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 arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-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 arrow operator">=></span> state<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token operator">*</span> <span class="token number">2</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="创建-pinia-实例"><a aria-hidden="true" tabindex="-1" href="#创建-pinia-实例"><span class="icon icon-link"></span></a>创建 Pinia 实例</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createApp <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App.vue'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span>
</span><span class="code-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><span class="code-line">
</span><span class="code-line">app<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span>
</span><span class="code-line">app<span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></code></pre>
<p>在你的 <a href="./vue.html">Vue</a> 应用中创建一个 Pinia 实例并将其传递给 <a href="./vue.html">Vue</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="热重载-store"><a aria-hidden="true" tabindex="-1" href="#热重载-store"><span class="icon icon-link"></span></a>热重载 Store</h3><div class="wrap-body">
<p>使用 Vite 时，你可以启用热重载功能：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token keyword module">import</span><span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">hot</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword module">import</span><span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">hot</span><span class="token punctuation">.</span><span class="token method function property-access">accept</span><span class="token punctuation">(</span><span class="token function">acceptHMRUpdate</span><span class="token punctuation">(</span>useCounterStore<span class="token punctuation">,</span> <span class="token keyword module">import</span><span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">hot</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="使用-store"><a aria-hidden="true" tabindex="-1" href="#使用-store"><span class="icon icon-link"></span></a>使用 Store</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>在组件中使用 <code>store</code></p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token operator">&#x3C;</span>template<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span>div<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token maybe-class-name">Count</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> counterStore<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token maybe-class-name">Double</span> <span class="token maybe-class-name">Count</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> counterStore<span class="token punctuation">.</span><span class="token property-access">doubleCount</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span>button @click<span class="token operator">=</span><span class="token string">"counterStore.increment"</span><span class="token operator">></span><span class="token maybe-class-name">Increment</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>button<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span><span class="token operator">/</span>div<span class="token operator">></span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>template<span class="token operator">></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token operator">&#x3C;</span>script<span class="token operator">></span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useCounterStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/counter'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line"> counterStore
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="modules-模式"><a aria-hidden="true" tabindex="-1" href="#modules-模式"><span class="icon icon-link"></span></a>Modules 模式</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>Pinia 不使用传统的 Vuex 模块模式。相反，推荐使用独立的 store 文件：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/stores/user.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> useUserStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-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 arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Alice'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setName</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">=</span> name
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">isAdult</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 arrow operator">=></span> state<span class="token punctuation">.</span><span class="token property-access">age</span> <span class="token operator">>=</span> <span class="token number">18</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-options-api"><a aria-hidden="true" tabindex="-1" href="#使用-options-api"><span class="icon icon-link"></span></a>使用 Options API</h3><div class="wrap-body">
<p>如果你更喜欢 Options API，可以这样使用 Pinia：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token operator">&#x3C;</span>script<span class="token operator">></span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useCounterStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/counter'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line"> counterStore
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="高级用法"><a aria-hidden="true" tabindex="-1" href="#高级用法"><span class="icon icon-link"></span></a>高级用法</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用组合函数"><a aria-hidden="true" tabindex="-1" href="#使用组合函数"><span class="icon icon-link"></span></a>使用组合函数</h3><div class="wrap-body">
<p>你可以将 store 与组合函数一起使用：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/composables/useCounter.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useCounterStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/counter'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function">useCounter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">count</span><span class="token operator">:</span> counterStore<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">doubleCount</span><span class="token operator">:</span> counterStore<span class="token punctuation">.</span><span class="token property-access">doubleCount</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">increment</span><span class="token operator">:</span> counterStore<span class="token punctuation">.</span><span class="token property-access">increment</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="插件"><a aria-hidden="true" tabindex="-1" href="#插件"><span class="icon icon-link"></span></a>插件</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>Pinia 支持插件。你可以编写插件来扩展 Pinia 的功能：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/plugins/piniaPlugin.js</span>
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function">piniaPlugin</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> store <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> store<span class="token punctuation">.</span><span class="token method function property-access">$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> store<span class="token punctuation">,</span> args<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 arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Action </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"> was called with args:</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> args<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// main.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> piniaPlugin <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./plugins/piniaPlugin'</span>
</span><span class="code-line">
</span><span class="code-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><span class="code-line">pinia<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>piniaPlugin<span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-exist row-span-4 col-span-2"><div class="wrap-header h3wrap"><h3 id="持久化状态"><a aria-hidden="true" tabindex="-1" href="#持久化状态"><span class="icon icon-link"></span></a>持久化状态</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4 col-span-2-->
<h4 style="color:#228e6c;font-weight: bold;text-align: left;" id="1-安装--pinia-plugin-persist"><a aria-hidden="true" tabindex="-1" href="#1-安装--pinia-plugin-persist"><span class="icon icon-link"></span></a>1. 安装 <code>pinia-plugin-persist</code></h4>
<!--rehype:style=color:#228e6c;font-weight: bold;text-align: left;-->
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span> pinia-plugin-persist
</span></code></pre>
<h4 style="color:#228e6c;font-weight: bold;text-align: left;" id="2-配置-pinia-和-pinia-plugin-persist"><a aria-hidden="true" tabindex="-1" href="#2-配置-pinia-和-pinia-plugin-persist"><span class="icon icon-link"></span></a>2. 配置 Pinia 和 <code>pinia-plugin-persist</code></h4>
<!--rehype:style=color:#228e6c;font-weight: bold;text-align: left;-->
<p>在你的入口文件中配置 Pinia 和 <code>pinia-plugin-persist</code>。</p>
<p><strong>⚠️ Vue 2 项目</strong></p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Vue</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">vueCompositionApi</span> <span class="token keyword module">from</span> <span class="token string">'@vue/composition-api'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia<span class="token punctuation">,</span> <span class="token maybe-class-name">PiniaVuePlugin</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">piniaPersist</span> <span class="token keyword module">from</span> <span class="token string">'pinia-plugin-persist'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App.vue'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>vueCompositionApi<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span><span class="token maybe-class-name">PiniaVuePlugin</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-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><span class="code-line">pinia<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>piniaPersist<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-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><span class="code-line"> pinia<span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token arrow operator">=></span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></code></pre>
<p><strong>Vue 3 项目：</strong></p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createApp <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">piniaPersist</span> <span class="token keyword module">from</span> <span class="token string">'pinia-plugin-persist'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App.vue'</span>
</span><span class="code-line">
</span><span class="code-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><span class="code-line">pinia<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>piniaPersist<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></code></pre>
<h4 style="color:#228e6c;font-weight: bold;text-align: left;" id="3-创建-store-并启用持久化"><a aria-hidden="true" tabindex="-1" href="#3-创建-store-并启用持久化"><span class="icon icon-link"></span></a>3. 创建 Store 并启用持久化</h4>
<!--rehype:style=color:#228e6c;font-weight: bold;text-align: left;-->
<p>创建一个 Pinia store，并启用持久化存储。</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// stores/userStore.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> useUserStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'userStore'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-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 arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'S'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'L'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">accessToken</span><span class="token operator">:</span> <span class="token string">'xxxxxxxxxxxxx'</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setToken</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">accessToken</span> <span class="token operator">=</span> value
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">persist</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">strategies</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">storage</span><span class="token operator">:</span> <span class="token dom variable">localStorage</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">paths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'accessToken'</span><span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
<h4 style="color:#228e6c;font-weight: bold;text-align: left;" id="4-使用-store"><a aria-hidden="true" tabindex="-1" href="#4-使用-store"><span class="icon icon-link"></span></a>4. 使用 Store</h4>
<!--rehype:style=color:#228e6c;font-weight: bold;text-align: left;-->
<p>在组件中使用创建好的 store。</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/components/SomeComponent.vue</span>
</span><span class="code-line"><span class="token operator">&#x3C;</span>template<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span>div<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> userStore<span class="token punctuation">.</span><span class="token property-access">firstName</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> userStore<span class="token punctuation">.</span><span class="token property-access">lastName</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> userStore<span class="token punctuation">.</span><span class="token property-access">accessToken</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator">&#x3C;</span><span class="token operator">/</span>div<span class="token operator">></span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>template<span class="token operator">></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token operator">&#x3C;</span>script<span class="token operator">></span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useUserStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/userStore'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> userStore <span class="token operator">=</span> <span class="token function">useUserStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> userStore <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="ssr-支持"><a aria-hidden="true" tabindex="-1" href="#ssr-支持"><span class="icon icon-link"></span></a>SSR 支持</h3><div class="wrap-body">
<p>Pinia 支持服务端渲染 (SSR)。在你的 SSR 入口文件中创建 Pinia 实例：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createSSRApp</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span>
</span><span class="code-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><span class="code-line">
</span><span class="code-line"> app<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> app<span class="token punctuation">,</span> pinia <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>明白了，让我们来结合 <code>pinia-plugin-persist</code> 插件完善 Pinia 备忘清单。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-vue-devtools"><a aria-hidden="true" tabindex="-1" href="#使用-vue-devtools"><span class="icon icon-link"></span></a>使用 Vue Devtools</h3><div class="wrap-body">
<p>Pinia 可以与 Vue Devtools 一起使用。确保你安装了最新版本的 Vue Devtools，然后你可以在 Devtools 中查看和调试你的 Pinia store。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用异步-actions"><a aria-hidden="true" tabindex="-1" href="#使用异步-actions"><span class="icon icon-link"></span></a>使用异步 Actions</h3><div class="wrap-body">
<p>Pinia 支持在 actions 中使用异步代码：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/stores/todo.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">axios</span> <span class="token keyword module">from</span> <span class="token string">'axios'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> useTodoStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'todo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-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 arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">todos</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">async</span> <span class="token function">fetchTodos</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword control-flow">await</span> axios<span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">'/api/todos'</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">todos</span> <span class="token operator">=</span> response<span class="token punctuation">.</span><span class="token property-access">data</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="测试-pinia-store"><a aria-hidden="true" tabindex="-1" href="#测试-pinia-store"><span class="icon icon-link"></span></a>测试 Pinia Store</h3><div class="wrap-body">
<p>你可以使用 Vue Test Utils 和 Jest 来测试你的 Pinia store：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// __tests__/counterStore.test.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> setActivePinia<span class="token punctuation">,</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useCounterStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/counter'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'Counter Store'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setActivePinia</span><span class="token punctuation">(</span><span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'increments the count'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>counterStore<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
</span><span class="code-line"> counterStore<span class="token punctuation">.</span><span class="token method function property-access">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>counterStore<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'returns double count'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> counterStore<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token operator">=</span> <span class="token number">2</span>
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>counterStore<span class="token punctuation">.</span><span class="token property-access">doubleCount</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
<ul>
<li><a href="https://pinia.vuejs.org/">Pinia 官方文档</a></li>
<li><a href="https://github.com/vuejs/pinia">Pinia GitHub 仓库</a></li>
<li><a href="https://pinia.vuejs.org/getting-started.html">Pinia 快速上手</a></li>
<li><a href="https://seb-l.github.io/pinia-plugin-persist/basic-usage.html">pinia-plugin-persist 官方文档</a></li>
</ul>
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&#x26;A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.0" defer></script><script src="../js/fuse.min.js?v=1.8.0" defer></script><script src="../js/main.js?v=1.8.0" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
Reference in New Issue View Git Blame Copy Permalink