mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-19 13:41:21 +08:00
feats (docs): add Pinia Memo List (#672)
* feats (docs): add Pinia Memo List
Create a Pinia Memo List to document common commands and actions of the Pinia State Management Library in markdown format. Content includes getting started, creating Pinia instances, defining the Store, using the Store, and more
* docs(pinia): update link to pinia-plugin-persist documentation
Correct the documentation link for pinia-plugin-persist in the Pinia documentation
to point to the official documentation hosted on seb-l.github.io. This ensures
that readers will access the most up-to-date and correct information regarding
the usage of the pinia-plugin-persist library. 60c463b1cb
This commit is contained in:
jaywcjlove
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 MiB After Width: | Height: | Size: 10 MiB |
326
docs/pinia.html
Normal file
326
docs/pinia.html
Normal file
@ -0,0 +1,326 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-color-mode="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Pinia 备忘清单
|
||||
& pinia cheatsheet & Quick Reference</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta description="这是一份 Pinia 状态管理库的备忘单，列出了 Pinia 的常用命令和操作。
|
||||
|
||||
入门，为开发人员分享快速参考备忘单。">
|
||||
<meta keywords="pinia,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.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%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="../style/style.css">
|
||||
<link rel="stylesheet" href="../style/katex.css">
|
||||
</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.5.5"></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 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
|
||||
<path d="M107.946667 838.4l57.173333 23.893333v-385.28l-103.68 250.026667c-17.493333 43.52 3.413333 93.44 46.506667 111.36z m832-157.866667L728.32 169.813333a85.888 85.888 0 0 0-77.226667-52.48c-11.093333 0-22.613333 1.706667-33.706666 6.4L302.933333 253.866667a85.290667 85.290667 0 0 0-46.08 110.933333l211.626667 510.72a85.248 85.248 0 0 0 110.933333 46.08l314.026667-130.133333a85.077333 85.077333 0 0 0 46.506667-110.933334zM336.213333 373.333333c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667 42.666667 19.2 42.666667 42.666667-19.2 42.666667-42.666667 42.666666z m-85.333333 469.333334c0 46.933333 38.4 85.333333 85.333333 85.333333h61.866667l-147.2-355.84v270.506667z"></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="#创建-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="#热重载-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="#ssr-支持">SSR 支持</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="#使用-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"><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">
|
||||
<p>在你的 Vue 应用中创建一个 Pinia 实例并将其传递给 Vue：</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"><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>
|
||||
</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>创建一个 store 文件（例如 <code>src/stores/counter.js</code>），并定义 store：</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="使用-store"><a aria-hidden="true" tabindex="-1" href="#使用-store"><span class="icon icon-link"></span></a>使用 Store</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 operator"><</span>template<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</span>div<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</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"><</span><span class="token operator">/</span>p<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</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"><</span><span class="token operator">/</span>p<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</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"><</span><span class="token operator">/</span>button<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
||||
</span><span class="code-line"><span class="token operator"><</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"><</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"><</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="热重载-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"><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">
|
||||
<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"><</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"><</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"><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>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-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-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">
|
||||
<h4 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>
|
||||
<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 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>
|
||||
<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 id="3-创建-store-并启用持久化"><a aria-hidden="true" tabindex="-1" href="#3-创建-store-并启用持久化"><span class="icon icon-link"></span></a>3. 创建 Store 并启用持久化</h4>
|
||||
<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 id="4-使用-store"><a aria-hidden="true" tabindex="-1" href="#4-使用-store"><span class="icon icon-link"></span></a>4. 使用 Store</h4>
|
||||
<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"><</span>template<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</span>div<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</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"><</span><span class="token operator">/</span>p<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</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"><</span><span class="token operator">/</span>p<span class="token operator">></span>
|
||||
</span><span class="code-line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
||||
</span><span class="code-line"><span class="token operator"><</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"><</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"><</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="使用-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&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.5.5" defer></script><script src="../js/fuse.min.js?v=1.5.5" defer></script><script src="../js/main.js?v=1.5.5" 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>
|
||||
@ -1467,7 +1467,7 @@
|
||||
<!--rehype:class=home-card home-links-->
|
||||
<p>如果你有资源，可以很方便<a href="https://github.com/jaywcjlove/reference/issues/102#issue-1451649637">部署 web 版</a>，这非常简单，只需要克隆 <a href="https://github.com/jaywcjlove/reference/tree/gh-pages">gh-pages</a> 分支代码到你的静态服务就可以了，还可以使用 <a href="https://hub.docker.com/r/wcjiang/reference">docker</a> 快捷部署 web 版。</p>
|
||||
|
||||
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>. Updated on 2024/06/25 05:24:32</footer></footer><script src="data.js?v=1.5.5" defer></script><script src="js/fuse.min.js?v=1.5.5" defer></script><script src="js/main.js?v=1.5.5" 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">
|
||||
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>. Updated on 2024/06/25 05:25:02</footer></footer><script src="data.js?v=1.5.5" defer></script><script src="js/fuse.min.js?v=1.5.5" defer></script><script src="js/main.js?v=1.5.5" 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
Block a user