mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
docs: 优化文档
This commit is contained in:
parent
fdfe79e65c
commit
22161d7b91
@ -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);
|
||||||
|
```
|
||||||
|
|
||||||
### 运行时配置
|
### 运行时配置
|
||||||
|
|
||||||
|
@ -1,30 +1,43 @@
|
|||||||
# @fesjs/plugin-vuex
|
# @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
|
└── src
|
||||||
├── pages
|
├── pages
|
||||||
│ └── index.vue
|
│ └── index.vue
|
||||||
└── stores
|
└── stores
|
||||||
│ └── foo
|
│ └── foo
|
||||||
│ │ └── bar.js
|
│ │ └── bar.js
|
||||||
│ ├── counter.js
|
│ ├── counter.js
|
||||||
│ ├── plugin-logger.js
|
│ ├── plugin-logger.js
|
||||||
│ ├── user.js
|
│ ├── user.js
|
||||||
└── app.js
|
└── app.js
|
||||||
```
|
```
|
||||||
|
|
||||||
::: tip
|
::: tip
|
||||||
为了防止`fesjs`与`vuex`的export冲突,fesjs不提供导出vuex的任何api。你可以直接使用vuex的api
|
为了防止`fesjs`与`vuex`的 export 冲突,fesjs 不提供导出 vuex 的任何 api。你可以直接使用 vuex 的 api
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 `package.json` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -35,25 +48,29 @@ import { useStore } from 'vuex';
|
|||||||
```
|
```
|
||||||
|
|
||||||
## 配置
|
## 配置
|
||||||
|
|
||||||
在 `.fes.js` 中配置:
|
在 `.fes.js` 中配置:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
vuex: {
|
vuex: {
|
||||||
strict: true // 开启严格模式
|
strict: true, // 开启严格模式
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
## 场景使用
|
## 场景使用
|
||||||
先定义在stores下定义user模块,包含嵌套模块
|
|
||||||
|
先定义在 stores 下定义 user 模块,包含嵌套模块
|
||||||
|
|
||||||
stores/user.js
|
stores/user.js
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
state: () => ({
|
state: () => ({
|
||||||
name: 'aring',
|
name: 'aring',
|
||||||
age: 20
|
age: 20,
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
login() {
|
login() {
|
||||||
@ -63,68 +80,74 @@ export default {
|
|||||||
reslove('OK');
|
reslove('OK');
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
modules: {
|
modules: {
|
||||||
address: {
|
address: {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
province: '广东省',
|
province: '广东省',
|
||||||
city: '深圳市',
|
city: '深圳市',
|
||||||
zone: '南山区'
|
zone: '南山区',
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
address(state) {
|
address(state) {
|
||||||
return state.province + state.city + state.zone;
|
return state.province + state.city + state.zone;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
stores/foo/bar.js
|
stores/foo/bar.js
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
state: () => ({
|
state: () => ({
|
||||||
count: 0
|
count: 0,
|
||||||
}),
|
}),
|
||||||
mutations: {
|
mutations: {
|
||||||
increment(state) {
|
increment(state) {
|
||||||
state.count++;
|
state.count++;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
doubleCount(state) {
|
doubleCount(state) {
|
||||||
return state.count * 2;
|
return state.count * 2;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
asyncIncrement({ commit }) {
|
asyncIncrement({ commit }) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
commit('increment');
|
commit('increment');
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
::: tip
|
::: tip
|
||||||
导出的`mutations`、`actions`和`getter`的事件类型,将会按文件命名;
|
导出的`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
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h4>Vuex</h4>
|
<h4>Vuex</h4>
|
||||||
<div><button :disabled="disabled" @click="login">async login</button></div>
|
<div><button :disabled="disabled" @click="login">async login</button></div>
|
||||||
<div><button @click="fooBarIncrement">foo/bar:{{fooBarDoubleCount}}</button></div>
|
<div>
|
||||||
<div>{{address}}</div>
|
<button @click="fooBarIncrement">foo/bar:{{ fooBarDoubleCount }}</button>
|
||||||
|
</div>
|
||||||
|
<div>{{ address }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<config>
|
<config>
|
||||||
@ -155,38 +178,47 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), // foo/bar目录会解析成驼峰fooBar
|
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>
|
</script>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
::: tip
|
::: tip
|
||||||
由于该插件注册在onAppCreated中,如果在onAppCreated及之前使用useStore时,获取不到vuex实例
|
由于该插件注册在 onAppCreated 中,如果在 onAppCreated 及之前使用 useStore 时,获取不到 vuex 实例
|
||||||
|
|
||||||
|
`fesjs`导出了 vuex 实例`store`,如在 app.js 文件中
|
||||||
|
|
||||||
`fesjs`导出了vuex实例`store`,如在app.js文件中
|
|
||||||
```js
|
```js
|
||||||
import { store, GETTER_TYPES } from '@fesjs/fes';
|
import { store, GETTER_TYPES } from '@fesjs/fes';
|
||||||
console.log(store.getters[GETTER_TYPES.user.address])
|
console.log(store.getters[GETTER_TYPES.user.address]);
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## vuex插件
|
## vuex 插件
|
||||||
stores文件夹下的文件名包含plugin被解析为插件,vuex插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html)
|
|
||||||
|
stores 文件夹下的文件名包含 plugin 被解析为插件,vuex 插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html)
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### store
|
### store
|
||||||
* 类型 `Object`
|
|
||||||
* vuex实例
|
- 类型 `Object`
|
||||||
|
- vuex 实例
|
||||||
|
|
||||||
### MUTATION_TYPES
|
### MUTATION_TYPES
|
||||||
* 类型 `Object`
|
|
||||||
* mutation的所有事件类型
|
- 类型 `Object`
|
||||||
|
- mutation 的所有事件类型
|
||||||
|
|
||||||
### GETTER_TYPES
|
### GETTER_TYPES
|
||||||
* 类型 `Object`
|
|
||||||
* getter的所有方法名
|
- 类型 `Object`
|
||||||
|
- getter 的所有方法名
|
||||||
|
|
||||||
### ACTION_TYPES
|
### ACTION_TYPES
|
||||||
* 类型 `Object`
|
|
||||||
* action的所有事件类型
|
- 类型 `Object`
|
||||||
|
- action 的所有事件类型
|
||||||
|
Loading…
x
Reference in New Issue
Block a user