@fesjs/plugin-pinia

介绍

集成 pinia ,提供状态管理的能力,封装一些胶水代码,可以直接定义 store 使用。

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

import{defineStore}from'pinia';

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

└── src
 ├── pages
 │ └── index.vue
 └── stores
 │ ├── plugin-logger.js
 │ ├── user.js
 └── app.js

启用方式

在 package.json 中引入依赖:

json

{
"dependencies":{
"@fesjs/fes":"^3.0.0",
"@fesjs/plugin-pinia":"^3.0.0",
"pinia":"^2.0.11"
}
}

API

pinia

createPinia执行后创建的实例。

import{pinia}from'@fesjs/fes';

使用

定义 store

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

import{defineStore}from'pinia';

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
exportconst useStore =defineStore('main',{
// other options...
});

setup

import{useStore}from'@/store/main';
exportdefault{
setup(){
conststore=useStore();
},
};

非 setup

比如在 app.js 中:

import{pinia}from'@fesjs/fes';

exportconst beforeRender ={
loading:<PageLoading />,
action(){
const{setRole}=accessApi;
returnnewPromise((resolve)=>{
setTimeout(()=>{
conststore=useStore(pinia);
store.$patch({
 userName:'李雷',
 role:'admin',
});
setRole('admin');
},1000);
});
},
};

@fesjs/plugin-pinia ​

介绍 ​

启用方式 ​

API ​

pinia ​

使用 ​

定义 store ​

setup ​

非 setup ​