"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)('

为了防止 Fes.js 与 pinia 提供的 API 冲突，Fes.js不提供任何 pinia 的API，相关API直接从 pinia 导出：

import { defineStore } from 'pinia';\n
1

约定 plugin 定义放在 stores 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。

└── src\n    ├── pages\n    │    └── index.vue\n    └── stores \n    │    ├── plugin-logger.js       \n    │    ├── user.js\n    └── app.js\n
1
2
3
4
5
6
7

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-pinia": "^2.0.0",\n        "pinia": "^2.0.11"\n    }\n}\n
1
2
3
4
5
6
7

API

pinia

createPinia执行后创建的实例。

import { pinia } from '@fesjs/fes'\n
1

使用

定义 store

我们在 src/store/main.js中：

import { defineStore } from 'pinia'\n\n// useStore could be anything like useUser, useCart\n// the first argument is a unique id of the store across your application\nexport const useStore = defineStore('main', {\n  // other options...\n})\n
1
2
3
4
5
6
7

setup

import { useStore } from '@/store/main'\nexport default {\n    setup(){\n        const store = useStore()\n    }\n}\n
1
2
3
4
5
6

非setup

比如在app.js中:

import { pinia } from '@fesjs/fes'\n\nexport const beforeRender = {\n    loading: <PageLoading />,\n    action() {\n        const { setRole } = accessApi;\n        return new Promise((resolve) => {\n            setTimeout(() => {\n                const store = useStore(pinia);\n                store.$patch({\n                    userName: '李雷',\n                    role: 'admin'\n                });\n                setRole('admin');\n            }, 1000);\n        });\n    }\n};\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
',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}}}]);