From fa334fbfef335f855ff0a32c9485a0d79b127675 Mon Sep 17 00:00:00 2001 From: harrywan Date: Mon, 8 Nov 2021 20:29:32 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(plugin-layout):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=A4=9A=E9=A1=B5=E7=AD=BElayout=E8=AE=BE=E7=BD=AE=E4=B8=BAfal?= =?UTF-8?q?se=E4=BE=9D=E7=84=B6=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue index 778302f8..08f30c4f 100644 --- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue +++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue @@ -64,8 +64,7 @@
- - +
From 714ce574632f01b1062acdab68d4b7f98633cbb6 Mon Sep 17 00:00:00 2001 From: harrywan Date: Mon, 8 Nov 2021 20:36:05 +0800 Subject: [PATCH 2/3] chore(release): publish - @fesjs/create-fes-app@2.0.5 - @fesjs/plugin-icon@2.0.4 - @fesjs/plugin-layout@2.0.5 - @fesjs/plugin-qiankun@2.0.6 - @fesjs/preset-built-in@2.0.6 - @fesjs/fes@2.0.7 --- packages/create-fes-app/package.json | 2 +- packages/fes-plugin-icon/package.json | 2 +- packages/fes-plugin-layout/package.json | 2 +- packages/fes-plugin-qiankun/package.json | 2 +- packages/fes-preset-built-in/package.json | 2 +- packages/fes/package.json | 4 ++-- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/create-fes-app/package.json b/packages/create-fes-app/package.json index adf6c6e5..aba469a2 100644 --- a/packages/create-fes-app/package.json +++ b/packages/create-fes-app/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/create-fes-app", - "version": "2.0.4", + "version": "2.0.5", "description": "create a app base on fes.js", "main": "lib/index.js", "files": [ diff --git a/packages/fes-plugin-icon/package.json b/packages/fes-plugin-icon/package.json index 6273839d..e515cc19 100644 --- a/packages/fes-plugin-icon/package.json +++ b/packages/fes-plugin-icon/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/plugin-icon", - "version": "2.0.3", + "version": "2.0.4", "description": "@fesjs/plugin-icon", "main": "lib/index.js", "files": [ diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json index 3d5db0c5..f6d83cdc 100644 --- a/packages/fes-plugin-layout/package.json +++ b/packages/fes-plugin-layout/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/plugin-layout", - "version": "2.0.4", + "version": "2.0.5", "description": "@fesjs/plugin-layout", "main": "lib/index.js", "files": [ diff --git a/packages/fes-plugin-qiankun/package.json b/packages/fes-plugin-qiankun/package.json index c7c347c2..99ec8bf7 100644 --- a/packages/fes-plugin-qiankun/package.json +++ b/packages/fes-plugin-qiankun/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/plugin-qiankun", - "version": "2.0.5", + "version": "2.0.6", "description": "@fesjs/plugin-qiankun", "main": "lib/index.js", "files": [ diff --git a/packages/fes-preset-built-in/package.json b/packages/fes-preset-built-in/package.json index 35fe52b6..ff86b39a 100644 --- a/packages/fes-preset-built-in/package.json +++ b/packages/fes-preset-built-in/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/preset-built-in", - "version": "2.0.5", + "version": "2.0.6", "description": "@fesjs/preset-built-in", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/packages/fes/package.json b/packages/fes/package.json index 78ed6b1a..f193e178 100644 --- a/packages/fes/package.json +++ b/packages/fes/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/fes", - "version": "2.0.6", + "version": "2.0.7", "description": "一个好用的前端管理台快速开发框架", "preferGlobal": true, "scripts": { @@ -39,7 +39,7 @@ ], "dependencies": { "@fesjs/compiler": "^2.0.2", - "@fesjs/preset-built-in": "^2.0.5", + "@fesjs/preset-built-in": "^2.0.6", "@fesjs/runtime": "^2.0.2", "@fesjs/utils": "^2.0.2", "resolve-cwd": "^3.0.0" From 3e3a84256ca30e54a87ca75ccaeb63e151646441 Mon Sep 17 00:00:00 2001 From: aringlai Date: Tue, 9 Nov 2021 15:53:41 +0800 Subject: [PATCH 3/3] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0plugin-vuex?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh/reference/plugin/plugins/vuex.md | 162 ++++++++++++++++++++--- 1 file changed, 146 insertions(+), 16 deletions(-) diff --git a/docs/zh/reference/plugin/plugins/vuex.md b/docs/zh/reference/plugin/plugins/vuex.md index 9d11c96c..8fd02429 100644 --- a/docs/zh/reference/plugin/plugins/vuex.md +++ b/docs/zh/reference/plugin/plugins/vuex.md @@ -2,12 +2,26 @@ ## 介绍 集成vuex插件 -增强vuex，导出所有的mutations、actions和getter的事件类型，编辑器提示 +增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示 约定模式，module和plugin定义放在sotres目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 - +``` +└── src + ├── pages + │ └── index.vue + └── stores + │ └── foo + │ │ └── bar.js + │ ├── counter.js + │ ├── plugin-logger.js + │ ├── user.js + └── app.js +``` ::: tip -vuex的提供的api直接导入使用 +为了防止`fesjs`与`vuex`的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api +```js +import { useStore } from 'vuex'; +``` ::: ## 启用方式 在 `package.json` 中引入依赖： @@ -31,25 +45,141 @@ export default { ``` ## 场景使用 -vuex定义模块之后，使用getter、mutation、action都是通过传入字符路径，如： -```js -import { useStore } from 'vuex'; -const store = useStore(); -store.getters['user/address'] -store.commit('counter/increment') -store.dispatch('user/login') -``` +先定义在stores下定义user模块，包含嵌套模块 -使用该插件，可以利用导出的事件类型，如： +stores/user.js ```js +export default { + namespaced: true, + state: () => ({ + name: 'aring', + age: 20 + }), + actions: { + login() { + return new Promise((reslove) => { + setTimeout(() => { + console.log('login'); + reslove('OK'); + }, 1000); + }); + } + }, + modules: { + address: { + state: () => ({ + province: '广东省', + city: '深圳市', + zone: '南山区' + }), + getters: { + address(state) { + return state.province + state.city + state.zone; + } + } + } + } +}; +``` +stores/foo/bar.js +```js +export default { + namespaced: true, + state: () => ({ + count: 0 + }), + mutations: { + increment(state) { + state.count++; + } + }, + getters: { + doubleCount(state) { + return state.count * 2; + } + }, + actions: { + asyncIncrement({ commit }) { + setTimeout(() => { + commit('increment'); + }, 2000); + } + } +}; +``` +::: tip +导出的`mutations`、`actions`和`getter`的事件类型，将会按文件命名； + +如`ACTION_TYPES.user.login`指向user模块中actions的login方法 + +如`GETTER_TYPES.user.address`指向user模块中嵌套的address getter + +如`MUTATION_TYPES.fooBar.increment`指向foo/bar模块中mutations的increment方法 +::: + +在vue文件中使用store +```vue + + +{ + "name": "store", + "title": "vuex测试" +} + + + ``` + +::: tip +由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例 + +`fesjs`导出了vuex实例`store`，如在app.js文件中 +```js +import { store, GETTER_TYPES } from '@fesjs/fes'; +console.log(store.getters[GETTER_TYPES.user.address]) +``` +::: + +## vuex插件 +stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html) ## API + +### store +* 类型 `Object` +* vuex实例 ### MUTATION_TYPES * 类型 `Object` * mutation的所有事件类型