docs: 优化文档

This commit is contained in:
winixt 2022-05-16 14:48:25 +08:00
parent 3208b3040a
commit aa1406ec45
2 changed files with 102 additions and 46 deletions

View File

@ -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);
```
### 运行时配置

View File

@ -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
<template>
<div>
<h4>Vuex</h4>
<div><button :disabled="disabled" @click="login">async login</button></div>
<div><button @click="fooBarIncrement">foo/bar{{fooBarDoubleCount}}</button></div>
<div>{{address}}</div>
<div>
<button @click="fooBarIncrement">foo/bar{{ fooBarDoubleCount }}</button>
</div>
<div>{{ address }}</div>
</div>
</template>
<config>
@ -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]),
};
}
},
};
</script>
```
::: 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 的所有事件类型