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
+<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>
+</template>
+<config>
+{
+ "name": "store",
+ "title": "vuex测试"
+}
+</config>
+<script>
+import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';
-const store = useStore();
-store.getters[GETTER_TYPES.user.address]
-store.commit(MUTATION_TYPES.counter.increment)
-store.dispatch(ACTION_TYPES.user.login)
+
+export default {
+ setup() {
+ const store = useStore();
+ console.log('store==>', store);
+ const disabled = ref(false);
+ // 可以利用导出的事件类型，不再通过字符传入（store.getters['user/address']）
+ return {
+ address: computed(() => store.getters[GETTER_TYPES.user.address]),
+ disabled,
+ login: () => {
+ disabled.value = true;
+ store.dispatch(ACTION_TYPES.user.login).then((res) => {
+ window.alert(res);
+ disabled.value = false;
+ });
+ },
+ fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), // foo/bar目录会解析成驼峰fooBar
+ fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount])
+ };
+ }
+};
+</script>
+
```
+
+::: 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的所有事件类型
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-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 @@
</a-layout>
</a-layout>
<div v-else class="content-wrapper">
- <MultiTabProvider v-if="multiTabs" />
- <router-view v-else></router-view>
+ <router-view></router-view>
</div>
</template>
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"