集成vuex插件
增强vuex，导出所有的mutations、actions和getter的事件类型，编辑器提示
约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
└── src\n ├── pages\n │ └── index.vue\n └── stores \n │ └── foo\n │ │ └── bar.js\n │ ├── counter.js\n │ ├── plugin-logger.js \n │ ├── user.js\n └── app.js\n提示
为了防止fesjs与vuex的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api
import { useStore } from 'vuex';\n在 package.json 中引入依赖：
{\n "dependencies": {\n "@fesjs/fes": "^2.0.0",\n "@fesjs/plugin-vuex": "^2.0.0"\n }\n}\n在 .fes.js 中配置：
export default {\n vuex: {\n strict: true // 开启严格模式\n }\n}\n先定义在stores下定义user模块，包含嵌套模块
stores/user.js
export default {\n namespaced: true,\n state: () => ({\n name: 'aring',\n age: 20\n }),\n actions: {\n login() {\n return new Promise((reslove) => {\n setTimeout(() => {\n console.log('login');\n reslove('OK');\n }, 1000);\n });\n }\n },\n modules: {\n address: {\n state: () => ({\n province: '广东省',\n city: '深圳市',\n zone: '南山区'\n }),\n getters: {\n address(state) {\n return state.province + state.city + state.zone;\n }\n }\n }\n }\n};\nstores/foo/bar.js
export default {\n namespaced: true,\n state: () => ({\n count: 0\n }),\n mutations: {\n increment(state) {\n state.count++;\n }\n },\n getters: {\n doubleCount(state) {\n return state.count * 2;\n }\n },\n actions: {\n asyncIncrement({ commit }) {\n setTimeout(() => {\n commit('increment');\n }, 2000);\n }\n }\n};\n提示
导出的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
<template>\n <div>\n <h4>Vuex</h4>\n <div><button :disabled="disabled" @click="login">async login</button></div>\n <div><button @click="fooBarIncrement">foo/bar：{{fooBarDoubleCount}}</button></div>\n <div>{{address}}</div>\n </div>\n</template>\n<config>\n{\n "name": "store",\n "title": "vuex测试"\n}\n</config>\n<script>\nimport { computed, ref } from 'vue';\nimport { useStore } from 'vuex';\nimport { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';\n\nexport default {\n setup() {\n const store = useStore();\n console.log('store==>', store);\n const disabled = ref(false);\n // 可以利用导出的事件类型，不再通过字符传入（store.getters['user/address']）\n return {\n address: computed(() => store.getters[GETTER_TYPES.user.address]),\n disabled,\n login: () => {\n disabled.value = true;\n store.dispatch(ACTION_TYPES.user.login).then((res) => {\n window.alert(res);\n disabled.value = false;\n });\n },\n fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), // foo/bar目录会解析成驼峰fooBar\n fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount])\n };\n }\n};\n</script>\n\n提示
由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例
fesjs导出了vuex实例store，如在app.js文件中
import { store, GETTER_TYPES } from '@fesjs/fes';\nconsole.log(store.getters[GETTER_TYPES.user.address])\nObjectObjectObjectObject