From fb5c2beb1547b5859815557ecb86c09fa3c1b6a8 Mon Sep 17 00:00:00 2001
From: aringlai <aringlai@webank.com>
Date: Tue, 9 Nov 2021 15:53:41 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0plugin-vuex=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/zh/reference/plugin/plugins/vuex.md | 162 ++++++++++++++++++++---
 1 file changed, 146 insertions(+), 16 deletions(-)

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的所有事件类型