mirror of
https://gitee.com/WeBank/fes.js.git
synced 2024-12-02 03:37:57 +08:00
feat: plugin-pinia
This commit is contained in:
harrywan
parent
2981a66218
commit
476b7bfe66
@ -64,7 +64,7 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
|
||||
| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass |
|
||||
| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） |
|
||||
| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
|
||||
| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
|
||||
|
||||
## 像数 1, 2, 3 一样容易
|
||||
使用 `yarn`：
|
||||
|
||||
@ -17,6 +17,7 @@ module.exports = {
|
||||
'fes-plugin-request',
|
||||
'fes-plugin-sass',
|
||||
'fes-plugin-vuex',
|
||||
'fes-plugin-pinia',
|
||||
'fes-preset-built-in',
|
||||
'fes-plugin-windicss',
|
||||
'fes-runtime',
|
||||
|
||||
@ -61,6 +61,7 @@ export const en: SidebarConfig = {
|
||||
'/reference/plugin/plugins/windicss.md',
|
||||
'/reference/plugin/plugins/sass.md',
|
||||
'/reference/plugin/plugins/editor.md',
|
||||
'/reference/plugin/plugins/pinia.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -61,6 +61,7 @@ export const zh: SidebarConfig = {
|
||||
'/zh/reference/plugin/plugins/windicss.md',
|
||||
'/zh/reference/plugin/plugins/sass.md',
|
||||
'/zh/reference/plugin/plugins/editor.md',
|
||||
'/zh/reference/plugin/plugins/pinia.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
| [@fesjs/plugin-sass](./plugins/sass.md) | 样式支持sass |
|
||||
| [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） |
|
||||
| [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
|
||||
| [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 |
|
||||
|
||||
## 架构
|
||||
|
||||
|
||||
90
docs/reference/plugin/plugins/pinia.md
Normal file
90
docs/reference/plugin/plugins/pinia.md
Normal file
@ -0,0 +1,90 @@
|
||||
# @fesjs/plugin-pinia
|
||||
|
||||
## 介绍
|
||||
集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。
|
||||
|
||||
|
||||
为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的API，相关API直接从 `pinia` 导出：
|
||||
```js
|
||||
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": "^2.0.0",
|
||||
"@fesjs/plugin-pinia": "^2.0.0",
|
||||
"pinia": "^2.0.11"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### pinia
|
||||
`createPinia`执行后创建的实例。
|
||||
|
||||
```js
|
||||
import { pinia } from '@fesjs/fes'
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
### 定义 store
|
||||
我们在 `src/store/main.js`中：
|
||||
```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
|
||||
export const useStore = defineStore('main', {
|
||||
// other options...
|
||||
})
|
||||
```
|
||||
|
||||
### setup
|
||||
|
||||
```js
|
||||
import { useStore } from '@/store/main'
|
||||
export default {
|
||||
setup(){
|
||||
const store = useStore()
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 非setup
|
||||
比如在app.js中:
|
||||
```js
|
||||
import { pinia } from '@fesjs/fes'
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
action() {
|
||||
const { setRole } = accessApi;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const store = useStore(pinia);
|
||||
store.$patch({
|
||||
userName: '李雷',
|
||||
role: 'admin'
|
||||
});
|
||||
setRole('admin');
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -16,7 +16,7 @@
|
||||
| [@fesjs/plugin-sass](./plugins/sass.md) | 样式支持sass |
|
||||
| [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） |
|
||||
| [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
|
||||
| [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 |
|
||||
|
||||
## 架构
|
||||
|
||||
|
||||
90
docs/zh/reference/plugin/plugins/pinia.md
Normal file
90
docs/zh/reference/plugin/plugins/pinia.md
Normal file
@ -0,0 +1,90 @@
|
||||
# @fesjs/plugin-pinia
|
||||
|
||||
## 介绍
|
||||
集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。
|
||||
|
||||
|
||||
为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的API，相关API直接从 `pinia` 导出：
|
||||
```js
|
||||
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": "^2.0.0",
|
||||
"@fesjs/plugin-pinia": "^2.0.0",
|
||||
"pinia": "^2.0.11"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### pinia
|
||||
`createPinia`执行后创建的实例。
|
||||
|
||||
```js
|
||||
import { pinia } from '@fesjs/fes'
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
### 定义 store
|
||||
我们在 `src/store/main.js`中：
|
||||
```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
|
||||
export const useStore = defineStore('main', {
|
||||
// other options...
|
||||
})
|
||||
```
|
||||
|
||||
### setup
|
||||
|
||||
```js
|
||||
import { useStore } from '@/store/main'
|
||||
export default {
|
||||
setup(){
|
||||
const store = useStore()
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 非setup
|
||||
比如在app.js中:
|
||||
```js
|
||||
import { pinia } from '@fesjs/fes'
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
action() {
|
||||
const { setRole } = accessApi;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const store = useStore(pinia);
|
||||
store.$patch({
|
||||
userName: '李雷',
|
||||
role: 'admin'
|
||||
});
|
||||
setRole('admin');
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示
|
||||
|
||||
约定模式，module和plugin定义放在sotres目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
|
||||
约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
|
||||
```
|
||||
└── src
|
||||
├── pages
|
||||
|
||||
21
packages/fes-plugin-pinia/LICENSE
Normal file
21
packages/fes-plugin-pinia/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020-present webank
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
66
packages/fes-plugin-pinia/README.md
Normal file
66
packages/fes-plugin-pinia/README.md
Normal file
@ -0,0 +1,66 @@
|
||||
|
||||
## Fes.js 是什么？
|
||||
Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。
|
||||
|
||||
它主要具备以下功能：
|
||||
- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
|
||||
|
||||
- 🧨 __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
|
||||
|
||||
- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
|
||||
|
||||
- 📦 __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
|
||||
|
||||
- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
|
||||
|
||||
## 插件
|
||||
|
||||
| 插件 | 介绍 |
|
||||
| ---- | ---- |
|
||||
| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 |
|
||||
| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 |
|
||||
| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 |
|
||||
| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`，提供单元测试、覆盖测试能力 |
|
||||
| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局，包括导航以及侧边栏 |
|
||||
| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`，提供国际化能力 |
|
||||
| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 |
|
||||
| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
|
||||
| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 |
|
||||
| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 |
|
||||
| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass |
|
||||
| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） |
|
||||
| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
|
||||
|
||||
## 像数 1, 2, 3 一样容易
|
||||
使用 `yarn`：
|
||||
```bash
|
||||
# 创建模板
|
||||
yarn create @fesjs/fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
|
||||
# 运行
|
||||
yarn dev
|
||||
```
|
||||
|
||||
使用 `npm`：
|
||||
```bash
|
||||
# 创建模板
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 运行
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 反馈
|
||||
|
||||
| Github Issue | 微信群 | Fes.js开源运营小助手 |
|
||||
| --- | --- | --- |
|
||||
| [@fesjs/fes.js/issues](../../issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |
|
||||
|
||||
|
||||
4
packages/fes-plugin-pinia/build.config.js
Normal file
4
packages/fes-plugin-pinia/build.config.js
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
module.exports = {
|
||||
copy: ['runtime']
|
||||
};
|
||||
37
packages/fes-plugin-pinia/package.json
Normal file
37
packages/fes-plugin-pinia/package.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "@fesjs/plugin-pinia",
|
||||
"version": "2.0.0",
|
||||
"description": "@fesjs/plugin-pinia",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
"lib"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-plugin-pinia"
|
||||
},
|
||||
"keywords": [
|
||||
"fes"
|
||||
],
|
||||
"author": "harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/utils": "^2.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5",
|
||||
"pinia": "^2.0.11"
|
||||
}
|
||||
}
|
||||
58
packages/fes-plugin-pinia/src/helper.js
Normal file
58
packages/fes-plugin-pinia/src/helper.js
Normal file
@ -0,0 +1,58 @@
|
||||
import { winPath } from '@fesjs/utils';
|
||||
import { readdirSync, statSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
|
||||
/**
|
||||
* 获取文件夹所有JS文件路径
|
||||
* @param {string} dir
|
||||
*/
|
||||
function getDirFilePaths(dir) {
|
||||
const dirs = readdirSync(dir);
|
||||
let pathList = [];
|
||||
for (const name of dirs) {
|
||||
const path = winPath(join(dir, name));
|
||||
const info = statSync(path);
|
||||
if (info.isDirectory()) {
|
||||
pathList = pathList.concat(getDirFilePaths(path));
|
||||
} else if (path.endsWith('.js')) {
|
||||
pathList.push(path);
|
||||
}
|
||||
}
|
||||
return pathList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 路径转驼峰
|
||||
* @param {*} path
|
||||
*/
|
||||
function pathToHump(path, root) {
|
||||
return path.replace(root, '')
|
||||
.replace('.js', '')
|
||||
.replace(RegExp('(/|\\.|-|_)\\S', 'g'), text => text[1].toUpperCase())
|
||||
.replace(/\S/, text => text.toLowerCase());
|
||||
}
|
||||
|
||||
|
||||
function parsePlugin(paths = [], root) {
|
||||
const plugins = [];
|
||||
const importPlugins = [];
|
||||
paths.forEach((path) => {
|
||||
const moduleName = pathToHump(path, root);
|
||||
importPlugins.push(`import ${moduleName} from '${path}'`);
|
||||
plugins.push(moduleName);
|
||||
});
|
||||
return { plugins, importPlugins };
|
||||
}
|
||||
|
||||
export function parseStore(root) {
|
||||
const paths = getDirFilePaths(root);
|
||||
const pluginPaths = [];
|
||||
paths.forEach((path) => {
|
||||
if (path.indexOf('plugin') > -1) {
|
||||
pluginPaths.push(path);
|
||||
}
|
||||
});
|
||||
return {
|
||||
...parsePlugin(pluginPaths, root)
|
||||
};
|
||||
}
|
||||
58
packages/fes-plugin-pinia/src/index.js
Normal file
58
packages/fes-plugin-pinia/src/index.js
Normal file
@ -0,0 +1,58 @@
|
||||
import { readFileSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
import { winPath } from '@fesjs/utils';
|
||||
import { parseStore } from './helper';
|
||||
|
||||
const namespace = 'plugin-pinia';
|
||||
|
||||
export default (api) => {
|
||||
const {
|
||||
paths,
|
||||
utils: { Mustache }
|
||||
} = api;
|
||||
|
||||
api.describe({
|
||||
key: 'pinia',
|
||||
config: {
|
||||
schema(joi) {
|
||||
return joi.object();
|
||||
},
|
||||
onChange: api.ConfigChangeType.regenerateTmpFiles
|
||||
}
|
||||
});
|
||||
|
||||
const absCoreFilePath = join(namespace, 'core.js');
|
||||
const absRuntimeFilePath = join(namespace, 'runtime.js');
|
||||
|
||||
api.onGenerateFiles(() => {
|
||||
const root = winPath(join(paths.absSrcPath, api.config.singular ? 'store' : 'stores'));
|
||||
const store = parseStore(root);
|
||||
|
||||
// 文件写出
|
||||
api.writeTmpFile({
|
||||
path: absCoreFilePath,
|
||||
content: Mustache.render(
|
||||
readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'),
|
||||
{
|
||||
IMPORT_PLUGINS: store.importPlugins.join('\n'),
|
||||
PLUGINS: store.plugins
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
api.copyTmpFiles({
|
||||
namespace,
|
||||
path: join(__dirname, 'runtime'),
|
||||
ignore: ['.tpl']
|
||||
});
|
||||
});
|
||||
|
||||
api.addPluginExports(() => [
|
||||
{
|
||||
specifiers: ['pinia'],
|
||||
source: absCoreFilePath
|
||||
}
|
||||
]);
|
||||
|
||||
api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
|
||||
};
|
||||
17
packages/fes-plugin-pinia/src/runtime/core.tpl
Normal file
17
packages/fes-plugin-pinia/src/runtime/core.tpl
Normal file
@ -0,0 +1,17 @@
|
||||
import { createPinia } from 'pinia'
|
||||
{{{IMPORT_PLUGINS}}};
|
||||
|
||||
const pinia = createPinia();
|
||||
|
||||
{{#PLUGINS}}
|
||||
pinia.use({{.}});
|
||||
{{/PLUGINS}}
|
||||
|
||||
const install = function (app) {
|
||||
app.use(pinia);
|
||||
}
|
||||
|
||||
export {
|
||||
install,
|
||||
pinia,
|
||||
};
|
||||
6
packages/fes-plugin-pinia/src/runtime/runtime.js
Normal file
6
packages/fes-plugin-pinia/src/runtime/runtime.js
Normal file
@ -0,0 +1,6 @@
|
||||
// eslint-disable-next-line import/extensions
|
||||
import { install } from './core';
|
||||
|
||||
export function onAppCreated({ app }) {
|
||||
install(app);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export default {
|
||||
disableTypeCheck: false,
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export default {
|
||||
disableTypeCheck: false,
|
||||
};
|
||||
@ -72,6 +72,9 @@ export default {
|
||||
},
|
||||
{
|
||||
name: 'cssModule'
|
||||
},
|
||||
{
|
||||
name: 'pinia'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-access": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^3.0.0",
|
||||
"@fesjs/plugin-layout": "^4.0.0",
|
||||
"@fesjs/plugin-locale": "^3.0.0",
|
||||
"@fesjs/plugin-model": "^2.0.0",
|
||||
"@fesjs/plugin-enums": "^2.0.0",
|
||||
@ -59,9 +59,11 @@
|
||||
"@fesjs/plugin-sass": "^2.0.0",
|
||||
"@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
|
||||
"@fesjs/plugin-windicss": "^2.0.0",
|
||||
"@fesjs/fes-design": "^0.1.10",
|
||||
"@fesjs/plugin-pinia": "^2.0.0",
|
||||
"@fesjs/fes-design": "^0.2.10",
|
||||
"vue": "^3.0.5",
|
||||
"vuex": "^4.0.0"
|
||||
"vuex": "^4.0.0",
|
||||
"pinia": "^2.0.11"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
|
||||
import { access as accessApi } from '@fesjs/fes';
|
||||
import { access as accessApi, pinia } from '@fesjs/fes';
|
||||
import PageLoading from '@/components/PageLoading';
|
||||
import UserCenter from '@/components/UserCenter';
|
||||
|
||||
import { useStore } from '@/store/main';
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
@ -11,6 +11,10 @@ export const beforeRender = {
|
||||
const { setRole } = accessApi;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const store = useStore(pinia);
|
||||
store.$patch({
|
||||
userName: '李雷'
|
||||
});
|
||||
setRole('admin');
|
||||
resolve({
|
||||
userName: '李雷'
|
||||
|
||||
31
packages/fes-template/src/pages/pinia.vue
Normal file
31
packages/fes-template/src/pages/pinia.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>{{store.counter}}</div>
|
||||
<FButton class="m-2" @click="store.increment">Button</FButton>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"name": "pinia",
|
||||
"title": "pinia"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { useStore } from '@/store/main';
|
||||
import { FButton } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FButton
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
console.log(store);
|
||||
return {
|
||||
store
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
21
packages/fes-template/src/store/main.js
Normal file
21
packages/fes-template/src/store/main.js
Normal file
@ -0,0 +1,21 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
// useStore could be anything like useUser, useCart
|
||||
// the first argument is a unique id of the store across your application
|
||||
export const useStore = defineStore('main', {
|
||||
// other options...
|
||||
state: () => ({
|
||||
// all these properties will have their type inferred automatically
|
||||
counter: 0,
|
||||
name: 'Eduardo',
|
||||
isAdmin: true
|
||||
}),
|
||||
actions: {
|
||||
increment() {
|
||||
this.counter++;
|
||||
},
|
||||
randomizeCounter() {
|
||||
this.counter = Math.round(100 * Math.random());
|
||||
}
|
||||
}
|
||||
});
|
||||
47
yarn.lock
47
yarn.lock
@ -1453,28 +1453,24 @@
|
||||
minimatch "^3.0.4"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@fesjs/fes-design@^0.1.10":
|
||||
version "0.1.10"
|
||||
resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.10.tgz#b7caaec676fcd1b2f86f5626b8b575f8d899b0c8"
|
||||
integrity sha512-VEt3gA6ExM7WRhXE1k98Ufgee8h9tTL6nqJOItqHPB0jEcakW5z/r0tSByJND4es7zthwMUihHBzccwvjOVBCQ==
|
||||
"@fesjs/fes-design@^0.2.10":
|
||||
version "0.2.11"
|
||||
resolved "https://registry.npmmirror.com/@fesjs/fes-design/-/fes-design-0.2.11.tgz#b0b7857e8122e787206ba0166f6c7b894a323b28"
|
||||
integrity sha512-kunu3gOHsDied7XT57btH7WkhyAe4WNvKHoSsFzYlMmvT3wIW9RlYlmebD8e7SRCq12Ule1F+7YdYHDf/w6v/A==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.16.3"
|
||||
"@juggle/resize-observer" "^3.3.1"
|
||||
"@popperjs/core" "^2.4.0"
|
||||
"@types/lodash-es" "^4.17.5"
|
||||
"@types/normalize-wheel" "^1.0.0"
|
||||
"@vue/shared" "^3.2.19"
|
||||
"@vueuse/core" "^6.7.5"
|
||||
async-validator "^4.0.1"
|
||||
csstype "^3.0.10"
|
||||
lodash-es "^4.17.21"
|
||||
normalize-wheel "^1.0.1"
|
||||
stickybits "^3.7.9"
|
||||
|
||||
"@fesjs/plugin-layout@^3.0.0":
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmmirror.com/@fesjs/plugin-layout/download/@fesjs/plugin-layout-3.0.0.tgz#51d5706ab59b0c03bbd9e9d3e3983b68840c5549"
|
||||
integrity sha512-tdLbiQpfCp6zOaekmjYPIir9d0QaOu4+88FZZ4bj8STjOP2iMsqxuc8P5hyL0tjZjrpUNmepYmkAAaKWcQMnXg==
|
||||
dependencies:
|
||||
"@fesjs/utils" "^2.0.3"
|
||||
|
||||
"@gar/promisify@^1.0.1":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.npmmirror.com/@gar/promisify/download/@gar/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
|
||||
@ -2885,6 +2881,18 @@
|
||||
resolved "https://registry.npmmirror.com/@types/linkify-it/download/@types/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
|
||||
integrity sha1-/SzS7bqn6qx+fzwXSLUqGRQ4Rsk=
|
||||
|
||||
"@types/lodash-es@^4.17.5":
|
||||
version "4.17.5"
|
||||
resolved "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.5.tgz#1c3fdd16849d84aea43890b1c60da379fb501353"
|
||||
integrity sha512-SHBoI8/0aoMQWAgUHMQ599VM6ZiSKg8sh/0cFqqlQQMyY9uEplc0ULU5yQNzcvdR4ZKa0ey8+vFmahuRbOCT1A==
|
||||
dependencies:
|
||||
"@types/lodash" "*"
|
||||
|
||||
"@types/lodash@*":
|
||||
version "4.14.178"
|
||||
resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
|
||||
integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
|
||||
|
||||
"@types/markdown-it@^12.2.3":
|
||||
version "12.2.3"
|
||||
resolved "https://registry.npmmirror.com/@types/markdown-it/download/@types/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
|
||||
@ -2923,6 +2931,11 @@
|
||||
resolved "https://registry.npmmirror.com/@types/normalize-package-data/download/@types/normalize-package-data-2.4.1.tgz?cache=0&sync_timestamp=1637268453735&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fnormalize-package-data%2Fdownload%2F%40types%2Fnormalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
|
||||
integrity sha1-0zV0eaD9/dWQf+Z+F+CoXJBuEwE=
|
||||
|
||||
"@types/normalize-wheel@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npmmirror.com/@types/normalize-wheel/-/normalize-wheel-1.0.0.tgz#d973b53557dc59c6136b5b737ae930e9218cb452"
|
||||
integrity sha512-SzWYVzP7Q8w4/976Gi3a6+J/8/VNTq6AW7wDafXorr1MYTxyZqJTbUvwQt1hiG3PXyFUMIKr+s6q3+MLz2c/TQ==
|
||||
|
||||
"@types/parse-json@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.npmmirror.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
|
||||
@ -3063,7 +3076,7 @@
|
||||
"@vue/compiler-dom" "3.2.27"
|
||||
"@vue/shared" "3.2.27"
|
||||
|
||||
"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18", "@vue/devtools-api@^6.0.0-beta.7":
|
||||
"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18", "@vue/devtools-api@^6.0.0-beta.21", "@vue/devtools-api@^6.0.0-beta.7":
|
||||
version "6.0.0-beta.21.1"
|
||||
resolved "https://registry.npmmirror.com/@vue/devtools-api/download/@vue/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
|
||||
integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
|
||||
@ -5297,7 +5310,7 @@ csstype@^2.6.8:
|
||||
resolved "https://registry.npmmirror.com/csstype/download/csstype-2.6.19.tgz?cache=0&sync_timestamp=1637224539572&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcsstype%2Fdownload%2Fcsstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
|
||||
integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
|
||||
|
||||
csstype@^3.0.2:
|
||||
csstype@^3.0.10, csstype@^3.0.2:
|
||||
version "3.0.10"
|
||||
resolved "https://registry.npmmirror.com/csstype/download/csstype-3.0.10.tgz?cache=0&sync_timestamp=1637224539572&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcsstype%2Fdownload%2Fcsstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
|
||||
integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
|
||||
@ -10357,6 +10370,14 @@ pify@^5.0.0:
|
||||
resolved "https://registry.npmmirror.com/pify/download/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f"
|
||||
integrity sha1-H17KP16H6+wozG1UoOSq8ArMEn8=
|
||||
|
||||
pinia@^2.0.11:
|
||||
version "2.0.11"
|
||||
resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.11.tgz#ff03c714f5e5f16207280a4fc2eab01f3701ee2b"
|
||||
integrity sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==
|
||||
dependencies:
|
||||
"@vue/devtools-api" "^6.0.0-beta.21"
|
||||
vue-demi "*"
|
||||
|
||||
pinkie-promise@^2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npmmirror.com/pinkie-promise/download/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user