From 22161d7b912114d3001b4e57203bc8d73eae22f1 Mon Sep 17 00:00:00 2001 From: winixt Date: Mon, 16 May 2022 14:48:25 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/reference/plugin/plugins/request.md | 26 ++++- docs/reference/plugin/plugins/vuex.md | 122 ++++++++++++++--------- 2 files changed, 102 insertions(+), 46 deletions(-) diff --git a/docs/reference/plugin/plugins/request.md b/docs/reference/plugin/plugins/request.md index 53af6cbf..e9f6404a 100644 --- a/docs/reference/plugin/plugins/request.md +++ b/docs/reference/plugin/plugins/request.md @@ -33,7 +33,31 @@ export default { - 默认值： `''` - 详情： - `dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。 + `dataField` 对应接口中的数据字段。假设接口统一的规范是 `{ code: string, result: any}`，可配置 `dataField: 'result'`， 直接获取数据。如果个别接口不符合这个规范，可在第三个参数加上 `dataField: false`。 + +```js +// 构建时配置 dataField: 'result' + +import { request } from '@fesjs/fes'; + +// 假设相应体为： {code: '0', result: {say: 'hello'}} +const result = await request('/path/to/query/'); + +// {say: 'hello'} +console.log(result); + +// 假设相应体为： {code: '0', data: {say: 'hello'}}，其中 result 字段换成了 data +const response1 = await request('/special/to/query/', null, { dataField: false }); + +// {code: '0', data: {say: 'hello'}} +console.log(response1); + +// 或者：假设相应体为： {code: '0', data: {say: 'hello'}}，其中 result 字段换成了 data +const response2 = await request('/special/to/query/', null, { dataField: 'data' }); + +// {say: 'hello'} +console.log(response2); +``` ### 运行时配置 diff --git a/docs/reference/plugin/plugins/vuex.md b/docs/reference/plugin/plugins/vuex.md index d6e27c48..dd274452 100644 --- a/docs/reference/plugin/plugins/vuex.md +++ b/docs/reference/plugin/plugins/vuex.md @@ -1,30 +1,43 @@ # @fesjs/plugin-vuex + +::: tip +vue3+ 官方推荐使用[pinia](./pinia)，不在推荐使用 vuex。 +::: + ## 介绍 -集成vuex插件 -增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示 +集成 vuex 插件 + +增强 vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示 + +约定模式，module 和 plugin 定义放在 stores 目录下，文件名包含 plugin 被解析为插件，无需额外配置，定义即可用。 -约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 ``` └── src ├── pages │ └── index.vue - └── stores + └── stores │ └── foo │ │ └── bar.js │ ├── counter.js - │ ├── plugin-logger.js + │ ├── plugin-logger.js │ ├── user.js └── app.js ``` + ::: tip -为了防止`fesjs`与`vuex`的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api +为了防止`fesjs`与`vuex`的 export 冲突，fesjs 不提供导出 vuex 的任何 api。你可以直接使用 vuex 的 api + ```js import { useStore } from 'vuex'; ``` + ::: + ## 启用方式 + 在 `package.json` 中引入依赖： + ```json { "dependencies": { @@ -35,25 +48,29 @@ import { useStore } from 'vuex'; ``` ## 配置 + 在 `.fes.js` 中配置： + ```js export default { vuex: { - strict: true // 开启严格模式 - } -} + strict: true, // 开启严格模式 + }, +}; ``` ## 场景使用 -先定义在stores下定义user模块，包含嵌套模块 + +先定义在 stores 下定义 user 模块，包含嵌套模块 stores/user.js + ```js export default { namespaced: true, state: () => ({ name: 'aring', - age: 20 + age: 20, }), actions: { login() { @@ -63,68 +80,74 @@ export default { reslove('OK'); }, 1000); }); - } + }, }, modules: { address: { state: () => ({ province: '广东省', city: '深圳市', - zone: '南山区' + zone: '南山区', }), getters: { address(state) { return state.province + state.city + state.zone; - } - } - } - } + }, + }, + }, + }, }; ``` + stores/foo/bar.js + ```js export default { namespaced: true, state: () => ({ - count: 0 + 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方法 +如`ACTION_TYPES.user.login`指向 user 模块中 actions 的 login 方法 -如`GETTER_TYPES.user.address`指向user模块中嵌套的address getter +如`GETTER_TYPES.user.address`指向 user 模块中嵌套的 address getter -如`MUTATION_TYPES.fooBar.increment`指向foo/bar模块中mutations的increment方法 +如`MUTATION_TYPES.fooBar.increment`指向 foo/bar 模块中 mutations 的 increment 方法 ::: -在vue文件中使用store +在 vue 文件中使用 store + ```vue @@ -155,38 +178,47 @@ export default { }); }, fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), // foo/bar目录会解析成驼峰fooBar - fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount]) + fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount]), }; - } + }, }; - ``` ::: tip -由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例 +由于该插件注册在 onAppCreated 中，如果在 onAppCreated 及之前使用 useStore 时，获取不到 vuex 实例 + +`fesjs`导出了 vuex 实例`store`，如在 app.js 文件中 -`fesjs`导出了vuex实例`store`，如在app.js文件中 ```js import { store, GETTER_TYPES } from '@fesjs/fes'; -console.log(store.getters[GETTER_TYPES.user.address]) +console.log(store.getters[GETTER_TYPES.user.address]); ``` + ::: -## vuex插件 -stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html) +## vuex 插件 + +stores 文件夹下的文件名包含 plugin 被解析为插件，vuex 插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html) + ## API ### store -* 类型 `Object` -* vuex实例 + +- 类型 `Object` +- vuex 实例 + ### MUTATION_TYPES -* 类型 `Object` -* mutation的所有事件类型 - + +- 类型 `Object` +- mutation 的所有事件类型 + ### GETTER_TYPES -* 类型 `Object` -* getter的所有方法名 + +- 类型 `Object` +- getter 的所有方法名 + ### ACTION_TYPES -* 类型 `Object` -* action的所有事件类型 + +- 类型 `Object` +- action 的所有事件类型