fes.js/docs/zh/reference/plugin/plugins/vuex.md

63 lines
1.4 KiB
Markdown
Raw Normal View History

2021-03-05 18:58:14 +08:00
# @fesjs/plugin-vuex
2021-03-04 20:01:30 +08:00
## 介绍
集成vuex插件
2021-03-03 20:32:13 +08:00
2021-03-04 20:01:30 +08:00
增强vuex导出所有的mutations、actions和getter的事件类型编辑器提示
2021-03-03 20:32:13 +08:00
2021-03-04 20:01:30 +08:00
约定模式module和plugin定义放在sotres目录下文件名包含plugin被解析为插件无需额外配置定义即可用。
::: tip
vuex的提供的api直接导入使用
:::
2021-03-03 20:32:13 +08:00
## 启用方式
2021-03-04 20:01:30 +08:00
`package.json` 中引入依赖:
```json
{
"dependencies": {
2021-03-05 18:58:14 +08:00
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-vuex": "^2.0.0"
2021-03-04 20:01:30 +08:00
}
}
```
2021-03-03 20:32:13 +08:00
## 配置
2021-03-04 20:01:30 +08:00
`.fes.js` 中配置:
```js
export default {
vuex: {
strict: true // 开启严格模式
}
}
```
2021-03-03 20:32:13 +08:00
2021-03-04 20:01:30 +08:00
## 场景使用
vuex定义模块之后使用getter、mutation、action都是通过传入字符路径
```js
import { useStore } from 'vuex';
const store = useStore();
store.getters['user/address']
store.commit('counter/increment')
store.dispatch('user/login')
```
2021-03-03 20:32:13 +08:00
2021-03-04 20:01:30 +08:00
使用该插件,可以利用导出的事件类型,如:
```js
import { useStore } from 'vuex';
2021-03-05 18:58:14 +08:00
import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';
2021-03-04 20:01:30 +08:00
const store = useStore();
store.getters[GETTER_TYPES.user.address]
store.commit(MUTATION_TYPES.counter.increment)
store.dispatch(ACTION_TYPES.user.login)
```
## API
### MUTATION_TYPES
* 类型 `Object`
* mutation的所有事件类型
### GETTER_TYPES
* 类型 `Object`
* getter的所有方法名
### ACTION_TYPES
* 类型 `Object`
* action的所有事件类型