fes.js/assets/js/v-6f2f6a5a.0a028df5.js

"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[658],{9465:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-6f2f6a5a",path:"/reference/plugin/plugins/pinia.html",title:"@fesjs/plugin-pinia",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"API",slug:"api",children:[{level:3,title:"pinia",slug:"pinia",children:[]}]},{level:2,title:"使用",slug:"使用",children:[{level:3,title:"定义 store",slug:"定义-store",children:[]},{level:3,title:"setup",slug:"setup",children:[]},{level:3,title:"非setup",slug:"非setup",children:[]}]}],filePathRelative:"reference/plugin/plugins/pinia.md",git:{updatedTime:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},1437:(n,s,a)=>{a.r(s),a.d(s,{default:()=>r});var e=a(6252);const p=(0,e._)("h1",{id:"fesjs-plugin-pinia",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#fesjs-plugin-pinia","aria-hidden":"true"},"#"),(0,e.Uk)(" @fesjs/plugin-pinia")],-1),t=(0,e._)("h2",{id:"介绍",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,e.Uk)(" 介绍")],-1),o={href:"https://pinia.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},c=(0,e.uE)('<p>为了防止 <code>Fes.js</code> 与 <code>pinia</code> 提供的 API 冲突，<code>Fes.js</code>不提供任何 <code>pinia</code> 的API，相关API直接从 <code>pinia</code> 导出：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;pinia&#39;</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>约定 <code>plugin</code> 定义放在 <code>stores</code> 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>└── src\n    ├── pages\n    │    └── index.vue\n    └── stores \n    │    ├── plugin-logger.js       \n    │    ├── user.js\n    └── app.js\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n    <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n        <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span><span class="token punctuation">,</span>\n        <span class="token property">&quot;@fesjs/plugin-pinia&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span><span class="token punctuation">,</span>\n        <span class="token property">&quot;pinia&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.11&quot;</span>\n    <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="pinia" tabindex="-1"><a class="header-anchor" href="#pinia" aria-hidden="true">#</a> pinia</h3><p><code>createPinia</code>执行后创建的实例。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="定义-store" tabindex="-1"><a class="header-anchor" href="#定义-store" aria-hidden="true">#</a> 定义 store</h3><p>我们在 <code>src/store/main.js</code>中：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;pinia&#39;</span>\n\n<span class="token comment">// useStore could be anything like useUser, useCart</span>\n<span class="token comment">// the first argument is a unique id of the store across your application</span>\n<span class="token keyword">export</span> <span class="token keyword">const</span> useStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">&#39;main&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  <span class="token comment">// other options...</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="setup" tabindex="-1"><a class="header-anchor" href="#setup" aria-hidden="true">#</a> setup</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/store/main&#39;</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n        <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n    <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="非setup" tabindex="-1"><a class="header-anchor" href="#非setup" aria-hidden="true">#</a> 非setup</h3><p>比如在app.js中:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span>\n    <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator">&lt;</span>PageLoading <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>\n    <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> accessApi<span class="token punctuation">;</span>\n        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n            <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n                <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span><span class="token punctuation">;</span>\n                store<span class="token punctuation">.</span><span class="token function">$patch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n                    <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">&#39;李雷&#39;</span><span class="token punctuation">,</span>\n                    <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;admin&#39;</span>\n                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n                <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div>',20),l={},r=(0,a(3744).Z)(l,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,t,(0,e._)("p",null,[(0,e.Uk)("集成 "),(0,e._)("a",o,[(0,e.Uk)("pinia"),(0,e.Wm)(a)]),(0,e.Uk)(" ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。")]),c],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]);