{"_id":"@ctsj/vuexgenerator","_rev":"4-d4e90d00dc8de6bb5cded940752ae227","name":"@ctsj/vuexgenerator","dist-tags":{"latest":"2.0.2","next":"2.0.0"},"versions":{"1.0.0":{"name":"@ctsj/vuexgenerator","version":"1.0.0","description":"Vuex的生成器","main":"/lib/index.js","directories":{"doc":"docs","test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","buildpackage":"ctbuild buildpackagets","buildumd":"ctbuild buildumd --packagename VuexGenerator --define alias=@,evnVars=true","generatorchangelog":"bd changelog/CHANGELOG.html","lint":"npm run lint:js && npm run lint:style && npm run lint:prettier","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js,.jsx,.ts,.tsx ","lint:fix":"eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style","lint:js":"eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src","lint:prettier":"check-prettier lint","lint:style":"stylelint --fix \"src/**/*.less\" --syntax less","prettier":"prettier -c --write \"**/*\""},"husky":{"hooks":{"pre-commit":"npm run lint-staged"}},"lint-staged":{"**/*.less":"stylelint --syntax less","**/*.{js,jsx,tsx,ts,less,md,json}":["prettier --write","git add"],"**/*.{js,jsx,ts,tsx}":"npm run lint-staged:js"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTSJ-VuexGenerator.git"},"resolutions":{"graceful-fs":"4.2.2"},"keywords":[],"author":"","license":"ISC","bugs":{"url":"https://github.com/playerljc/CTSJ-VuexGenerator/issues"},"homepage":"https://github.com/playerljc/CTSJ-VuexGenerator#readme","publishConfig":{"access":"public"},"devDependencies":{"@babel/runtime":"^7.7.4","@ctsj/build":"^4.0.11","babel-plugin-import":"^1.13.3","rimraf":"^3.0.2","typescript":"^3.8.2","fs-extra":"^9.0.1","@umijs/fabric":"^2.5.13","eslint":"^6.8.0","husky":"^4.2.5","lint-staged":"^10.2.0","prettier":"^2.0.5","stylelint":"^13.8.0"},"dependencies":{"vuex":"^3.6.2"},"gitHead":"6f2c3d4c88264be8c0b457e4d72597c3dd45f9f8","_id":"@ctsj/vuexgenerator@1.0.0","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ZPna2rvidzONHxUK0toIxNs0ANY6Pfgs6/nun7hlhAD3qk1jJqDVeB+1P6igA5pRGaMnpx0rpXhV48ANXnoHMg==","shasum":"082ca2cd7e60dcff0ef5c5d74d86df2fbf2c0d7d","tarball":"https://registry.npmjs.org/@ctsj/vuexgenerator/-/vuexgenerator-1.0.0.tgz","fileCount":17,"unpackedSize":58587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpf1NCRA9TVsSAnZWagAAomIP/ipTSMcmSCqZ80NHVf3W\n37wECga0QUy6NDaDztQDuwYOECC206FDBIqKpGLC/lLAZWIC2iXQQYt0Cz+U\nv7HOd7iHhUOBYIQEep4ugKfQbP/7Kd53r3KDaK4gxc7+TM/4wvteNK8GVWrQ\nwTIPQTOFEkfvJ9qpz9P4/JHqzspt/3kY+Ei2M6r4+Y9HBiMxq8ikmVUm25a2\naM0+bNLpqvqYNTFRt4t+07kP9Gwtm6fx/SM79yPXLRVTHURhDd7ulppPNEY8\nZbDl6b1geYMOxE5knLwQZHJuLP61aJkNU5WIysgcWoYhKbpYAyQBY8n8e9Ld\neI7SIlwrik+Ng6PShuV2HoYzmPnwn3GM4GcRKLA30O5sRsSwdRnQZDMFhILx\nGFg4n1lpuqEBwwNFiqDMGftgvtFF+KF18R4uS5voGCrd3e0ldqTEUAln2h/+\nWqTTd7cA/rA4PToKlw97CxThIeTG3k4JTlPZV/0fMrkywRIZW2UE7iWBo8Zj\n5tYDmdbH7rMS2sHnHgqi3suipgqvOCoFOAxmr1MJifbJrOVP1bNDqYNQQsfE\nd6/kuoQqlT1hSegEyzASV5qm7w7piYlytG3mionnNS01o1naG//d31wYktqg\n16yupN+MjWJwQ4DDYReV773OHeiARNwfOijN4l9l+TrqvNX72sREmpgw81r0\ncYEo\r\n=llc3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw4BSGpTiWuRHBELQ7nUPIS6vtD8p6xzsWu+BGZLlD/gIhALZ3cI9KsPl6tP1SEKRgn5MVhjAsHSWE3RSvgwln3t7f"}]},"_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vuexgenerator_1.0.0_1621491021297_0.654638593089834"},"_hasShrinkwrap":false},"2.0.0":{"name":"@ctsj/vuexgenerator","version":"2.0.0","description":"Vuex的生成器","main":"/lib/index.js","directories":{"doc":"docs","test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","buildpackage":"ctbuild buildpackagets","buildumd":"ctbuild buildumd --packagename VuexGenerator --define alias=@,evnVars=true","generatorchangelog":"bd changelog/CHANGELOG.html","lint":"npm run lint:js && npm run lint:style && npm run lint:prettier","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js,.jsx,.ts,.tsx ","lint:fix":"eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style","lint:js":"eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src","lint:prettier":"check-prettier lint","lint:style":"stylelint --fix \"src/**/*.less\" --syntax less","prettier":"prettier -c --write \"**/*\""},"husky":{"hooks":{"pre-commit":"npm run lint-staged"}},"lint-staged":{"**/*.less":"stylelint --syntax less","**/*.{js,jsx,tsx,ts,less,md,json}":["prettier --write","git add"],"**/*.{js,jsx,ts,tsx}":"npm run lint-staged:js"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTSJ-VuexGenerator.git"},"resolutions":{"graceful-fs":"4.2.2"},"keywords":[],"author":"","license":"ISC","bugs":{"url":"https://github.com/playerljc/CTSJ-VuexGenerator/issues"},"homepage":"https://github.com/playerljc/CTSJ-VuexGenerator#readme","publishConfig":{"access":"public"},"devDependencies":{"@babel/runtime":"^7.17.2","@ctsj/build":"^4.0.19","babel-plugin-import":"^1.13.3","rimraf":"^3.0.2","typescript":"^4.5.5","fs-extra":"^10.0.0","@umijs/fabric":"^2.10.1","eslint":"^8.9.0","husky":"^7.0.4","lint-staged":"^12.3.3","prettier":"^2.5.1","stylelint":"^14.5.0"},"dependencies":{"vue":"^3.2.31","vuex":"^4.0.2"},"readme":"# CTSJ-VuexGenerator\r\n\r\nvuex 生成器，能通过 Service 自动映射成组件引用 vuex 的 State、Action 和 Mutation 并带有自动重置功能(此功能是一个 vuex 的插件)\r\n\r\n# 简介\r\n\r\n  一个简单的例子，用 vuex 编写一个标椎用户的模块，用户模块中是标准的 CRUD 操作，我们大致会这样去写\r\n\r\n1. 定义 UserService，UserService 大致会是这样\r\n\r\n```javascript\r\nimport { stringify } from 'qs';\r\nimport request from '@/utils/request';\r\n\r\n// 列表\r\nexport async function fetchtList(params) {\r\n return request.get('fetchList');\r\n}\r\n\r\n// 详情\r\nexport async function fetchtInfo(id) {\r\n return request.get('fetchtInfo');\r\n}\r\n\r\n// 添加\r\nexport async function fetchtSave(payload) {\r\n return request.post('fetchSave');\r\n}\r\n\r\n// 删除\r\nexport async function fetchtDelete(id) {\r\n return request.delete('fetchtDelete');\r\n}\r\n\r\n// 修改\r\nexport async function fetchtUpdate(payload) {\r\n return request.put('fetchtUpdate');\r\n}\r\n```\r\n\r\n2. 定义 UserModel，UserModel 大致会是这样\r\n\r\n```javascript\r\nimport {\r\n fetchtList,\r\n fetchtInfo,\r\n fetchtSave,\r\n fetchtDelete,\r\n fetchtUpdate,\r\n} from '@/services/UserService';\r\n\r\nexport default {\r\n namespace: true,\r\n state: {\r\n list: {\r\n list: [],\r\n total: 0,\r\n },\r\n info: {},\r\n },\r\n actions: {\r\n // 列表\r\n fetchList({ commit, state }, payload) {\r\n fetchtList(payload).then((response) => {\r\n if (response.code === 0) {\r\n commit('receive', {\r\n ...state,\r\n list: response.data,\r\n });\r\n }\r\n });\r\n },\r\n // 详情\r\n fetchInfo({ commit, state }, { id }) {\r\n fetchInfo(id).then((response) => {\r\n if (response.code === 0) {\r\n commit('receive', {\r\n ...state,\r\n info: response.data,\r\n });\r\n }\r\n });\r\n },\r\n // 添加\r\n feachSave({ commit, state }, { success, ...other }) {\r\n feachSave(other).then((response) => {\r\n if (response.code === 0) {\r\n if (success) {\r\n success();\r\n }\r\n }\r\n });\r\n },\r\n // 修改\r\n feachUpdate({ commit, state }, { success, ...other }) {\r\n feachUpdate(other).then((response) => {\r\n if (response.code === 0) {\r\n if (success) {\r\n success();\r\n }\r\n }\r\n });\r\n },\r\n // 删除\r\n feachDelete({ commit, state }, { success, id }) {\r\n feachDelete(id).then((response) => {\r\n if (response.code === 0) {\r\n if (success) {\r\n success();\r\n }\r\n }\r\n });\r\n },\r\n },\r\n mutations: {\r\n receive(state, payload) {\r\n const keys = Object.keys(state);\r\n for (let i = 0; i < keys.length; i++) {\r\n const key = keys[i];\r\n state[key] = payload[key];\r\n }\r\n },\r\n },\r\n};\r\n```\r\n\r\n3. 定义 UserPage, UserPage 大致会是这样\r\n```javascript\r\n\r\n\r\n```\r\n\r\n  我们会发现一个问题，像这样比较常规的 CRUD 操作，从 Service -> Model -> Component 的 computed 和 methods 方法的名字都是一一对应的， 而 Model 中的 actions 操作基本都是调用 Service 中相应的接口，并且注入到数据流当中，而且 Service 也是按照相应模块编写的比如 UserService 就是处理 User 相关的操作， 这样就和 Model 中的 namespace 相对应，再则 Model 中的 Mutations 里面应该只有一个 receive 的 Mutation， 不应该有多个处理，actions 中所有的 commit(mutation)都应该调用 commit('receive')来进行处理 所以我们就可以根据 Service 自动生成 computed 和 methods 和 Model 中的 actions 和 mutations， 我们只处理标椎模块，如果自动生成的这三部分不能满足需求，可以进行重写覆盖\r\n\r\n# 安装\r\n\r\n```javascript\r\n npm install @ctsj/vuexgenerator\r\n yarn add @ctsj/vuexgenerator\r\n```\r\n\r\n# 例子\r\n\r\n1. 定义 UserService\r\n\r\n```javascript\r\nimport { stringify } from 'qs';\r\nimport request from '@/utils/request';\r\n\r\n// 列表\r\nexport async function fetchtList(params) {\r\n return request.get('fetchList');\r\n}\r\n\r\n// 详情\r\nexport async function fetchtInfo(id) {\r\n return request.get('fetchtInfo');\r\n}\r\n\r\n// 添加\r\nexport async function fetchtSave(payload) {\r\n return request.post('fetchSave');\r\n}\r\n\r\n// 删除\r\nexport async function fetchtDelete(id) {\r\n return request.delete('fetchtDelete');\r\n}\r\n\r\n// 修改\r\nexport async function fetchtUpdate(payload) {\r\n return request.put('fetchtUpdate');\r\n}\r\n\r\n// 默认导出与接口先关的参数\r\nexport default {\r\n // 接口成功失败的状态键\r\n codeKey: 'code',\r\n // 接口成功的状态值\r\n codeSuccessKey: 200,\r\n // 接口数据的键\r\n dataKey: 'data',\r\n // 接口消息键\r\n messageKey: 'message',\r\n};\r\n```\r\n\r\n2. 定义 UserModel\r\n\r\n```javascript\r\nexport default {};\r\n```\r\n\r\n3. 定义 UserPage\r\n\r\n```javascript\r\n\r\n\r\n\r\n```\r\n\r\n4. 使用setup\r\n```javascript\r\n\r\n\r\n\r\n```\r\n\r\n5. 注册 Service(在一个单独的文件中 VuexGeneratorPlugin.js)\r\n\r\n```javascript\r\nimport VuexGenerator from '@ctsj/vuexgenerator';\r\n\r\nimport UserModel from '../modules/user';\r\nimport PersonModel from '../modules/person';\r\n\r\nfunction serviceRegister() {\r\n const requireComponent = require.context('../../service', false, /.*\\.(js)$/);\r\n\r\n const services = {};\r\n requireComponent.keys().forEach((fileName) => {\r\n const serviceKey = fileName.substring(2, fileName.length - 3);\r\n services[serviceKey] = requireComponent(fileName);\r\n });\r\n\r\n return services;\r\n}\r\n\r\n// 创建VuexGeneratorPlugin插件\r\nexport default VuexGenerator(serviceRegister(), {\r\n user: UserModel,\r\n person: PersonModel,\r\n});\r\n```\r\n\r\n6. 在 main.js 中进行引用插件\r\n\r\n```javascript\r\nimport { createApp } from 'vue'\r\nimport Antd from 'ant-design-vue'\r\n\r\nimport store from './store'\r\nimport router from './router'\r\nimport App from './App.vue'\r\n\r\nimport './registerServiceWorker'\r\n\r\nimport 'ant-design-vue/dist/antd.css'\r\n\r\ncreateApp(App).use(store).use(router).use(Antd).mount('#app')\r\n```\r\n\r\n# API\r\n\r\n- 工厂方法 - 创建 vuex 的插件(传入 ServiceConfig 和 Modules 的定义)\r\n\r\n- mapState - state 的辅助函数\r\n- mapActions - action 的辅助函数\r\n- mapMutations - Mutations 的辅助函数\r\n- useState - 在setup中获取数据的辅助函数\r\n- useMutations - 在setup中更新state的辅助函数\r\n- useActions - 在setup中进行异步更新state的辅助函数\r\n- cleanMixin - 用户自动重置 vuex 数据的 mixin\r\n\r\n# 其他\r\n\r\ndemo 目录下附带了一个 demo\r\n","readmeFilename":"README.md","gitHead":"33790a77fcbaafa09bdf05e8ea6b8bc88a5c50f0","_id":"@ctsj/vuexgenerator@2.0.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-StoaVW1Qag3GdfABMqXYgCKh6Zuacxo6WfdcbI872aGUMDSWu8Xzdogt3OhvxnkILZLSqfxO3KYkqyoWJXtgIg==","shasum":"5edfda5147d6c97db7a854a45c5be96215c598b9","tarball":"https://registry.npmjs.org/@ctsj/vuexgenerator/-/vuexgenerator-2.0.0.tgz","fileCount":18,"unpackedSize":117344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDMHyCRA9TVsSAnZWagAAR9gP/jVmBwJp0AIz6rDWYKIj\nvjnpvlh7jLRA2kNW4OkYdGjP4aEi3UGQSXH47CCoV/oR0cc+Zp2l2lmwjWCS\nxr2UagkqR5YbkseBCK+hVZBJo5mh9XuKtxzC6bDJt89Hs8Gtg6BF04tbCSjm\nYjcKNM2JI7fGPXzCvfAm0xr57v8V5vd9hQ5omA+Kmfvmw+szCEalDEO+WJ5I\nZ9NSa1n14rYO8DcNTab1tvH15KCy3NXBWQAYpQ6a/4fW1WZRl8t9YOXB+rFy\nPuYUwbEq5fZAlLGuogqeJlO3KnmKa0kdk1nay6q4V3I4cySMI5eYPwTw4gmV\nk3OrR/aUU9ePuIJ005xr4k9XtvkxANrrJPZLs6lNB3F2sKazVG7nTnYL1szh\nmcY2MmiawXfEnVyKN0yXUdp4IPwn0T9dCjdq2aFph3a2PrUOOyBQH6MKZDQk\n0WdhAEZzAHP8TjNgMHTnCcAAu83DBTh+2ZTJxidNrJtCsaK8X4t0tbxs07nQ\nZxzl+WJ4qvyEXEEEFCD4Pt3zeGgKxHbNiusaW96mUS3VndqZc4OjjME7Y0ow\nktq6K5zKninJhvQjZyKIoKXchwWcxtyj8ph7r/D7iOnrSB5+v9O6wNVXDNJJ\n2yuRrdAhtcQ5yvw2VUPqdTDlwlEuRVyz5518hDWtbCwgQLIZi7q2nzFc/Y42\nVcn5\r\n=379R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArXTNgz3uvmutrDzbOwwVABdYmGvF9Ri0DHlod3LnlvAiEAhRCredlhoXvpNSvH4zU7icoID3wL+DFEcNcLfRHL9lQ="}]},"_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vuexgenerator_2.0.0_1645003250368_0.46885007895374775"},"_hasShrinkwrap":false},"1.0.1":{"name":"@ctsj/vuexgenerator","version":"1.0.1","description":"Vuex的生成器","main":"/lib/index.js","directories":{"doc":"docs","test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","buildpackage":"ctbuild buildpackagets","buildumd":"ctbuild buildumd --packagename VuexGenerator --define alias=@,evnVars=true","generatorchangelog":"bd changelog/CHANGELOG.html","lint":"npm run lint:js && npm run lint:style && npm run lint:prettier","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js,.jsx,.ts,.tsx ","lint:fix":"eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style","lint:js":"eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src","lint:prettier":"check-prettier lint","lint:style":"stylelint --fix \"src/**/*.less\" --syntax less","prettier":"prettier -c --write \"**/*\""},"husky":{"hooks":{"pre-commit":"npm run lint-staged"}},"lint-staged":{"**/*.less":"stylelint --syntax less","**/*.{js,jsx,tsx,ts,less,md,json}":["prettier --write","git add"],"**/*.{js,jsx,ts,tsx}":"npm run lint-staged:js"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTSJ-VuexGenerator.git"},"resolutions":{"graceful-fs":"4.2.2"},"keywords":[],"author":"","license":"ISC","bugs":{"url":"https://github.com/playerljc/CTSJ-VuexGenerator/issues"},"homepage":"https://github.com/playerljc/CTSJ-VuexGenerator#readme","publishConfig":{"access":"public"},"devDependencies":{"@babel/runtime":"^7.7.4","@ctsj/build":"^4.0.11","babel-plugin-import":"^1.13.3","rimraf":"^3.0.2","typescript":"^3.8.2","fs-extra":"^9.0.1","@umijs/fabric":"^2.5.13","eslint":"^6.8.0","husky":"^4.2.5","lint-staged":"^10.2.0","prettier":"^2.0.5","stylelint":"^13.8.0"},"dependencies":{"vuex":"^3.6.2"},"gitHead":"a8bafedef066d24cbeb5b43704096b43ccd15387","_id":"@ctsj/vuexgenerator@1.0.1","_nodeVersion":"10.23.2","_npmVersion":"6.14.10","dist":{"integrity":"sha512-ZPE/iEHeDwZwGyl+GkkzcJMVn2cFHMlGZ3HempyLcp3qY6t1l7DPtioKU4ioXcX52mdZZhVQlMAe4Puryzw2nA==","shasum":"2026a22b1dcfd4a256b79d5dc142390401ff1f28","tarball":"https://registry.npmjs.org/@ctsj/vuexgenerator/-/vuexgenerator-1.0.1.tgz","fileCount":17,"unpackedSize":59662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaL+5TLV6SaU2R0pxSHPdv7YetFsZaMNovv08kA+gE5AiEA2eUu+/brzh87FHpjIElhkeunHlRhhK+RxwmCHdJdYBc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwfLfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq88w/+Ix6npT6dUylZIthGRhtdRPjrmb88TpWikD3dNQMuW6a2vmaY\r\nwKIv1q8l+ZxG008G7NH0H6LW9cvnSm2E7eOaPCuS21HHUPEUGMEaKy3JsKKe\r\nDXOLSA5ifr9Gq1p7xiBdT6VJV8Mplf79Op/UweeisC6O9kEaydtwudGs0Kjw\r\n3iu94qheC1IaIw/m7Qv40iczKwA3CvDxZiYmEeMYYJMASuT2YROjzXZdSaNE\r\nNOj2rHDPscxUxaT+8aLVv6FHcI3h9zYIQXl7HHMNFCsAmKPNCL0IyGUcMD68\r\n8aUbzh+64P7fWAWk9QVt8nistT/6y1NbnmYbIBi2+kZpCiVLquFJSV+MB5Ok\r\nh7D8BcQ7Ja0/wSVP4gF5PowY3lGMM4IRrvcrhMgBZzUlTrtq/81qOy6nkeoA\r\nTC+a5n7nk4YuIPSArDCp416EN9ekC8xrGzG59/FW94SUl6Ew61LSrQVle49/\r\n21xopkqFTX5PgHxDAP3072wM1MNyiMTdFKhQIjpC67SfBHLHoKFTgLYHk8I4\r\n0AeQ28LuXne4/Vgub1o/4p1ltnlffD00rScNYTZ5UkpcUGRz4+H+AfVQ3W1/\r\nXFI+SgbIukFEH6s40GRK9WPb2t44tkX/fxx/poUtltjWv6rzucKVdH0Xxm78\r\nywcMFsGxajbUzkDMvnikSNnmXQP80ZNXDEU=\r\n=RBE5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vuexgenerator_1.0.1_1673655007544_0.7200920500660006"},"_hasShrinkwrap":false},"2.0.2":{"name":"@ctsj/vuexgenerator","version":"2.0.2","description":"Vuex的生成器","main":"/lib/index.js","directories":{"doc":"docs","test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","buildpackage":"ctbuild buildpackagets","buildumd":"ctbuild buildumd --packagename VuexGenerator --define alias=@,evnVars=true","generatorchangelog":"bd changelog/CHANGELOG.html","lint":"npm run lint:js && npm run lint:style && npm run lint:prettier","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js,.jsx,.ts,.tsx ","lint:fix":"eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style","lint:js":"eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src","lint:prettier":"check-prettier lint","lint:style":"stylelint --fix \"src/**/*.less\" --syntax less","prettier":"prettier -c --write \"**/*\""},"husky":{"hooks":{"pre-commit":"npm run lint-staged"}},"lint-staged":{"**/*.less":"stylelint --syntax less","**/*.{js,jsx,tsx,ts,less,md,json}":["prettier --write","git add"],"**/*.{js,jsx,ts,tsx}":"npm run lint-staged:js"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTSJ-VuexGenerator.git"},"resolutions":{"graceful-fs":"4.2.2"},"keywords":[],"author":"","license":"ISC","bugs":{"url":"https://github.com/playerljc/CTSJ-VuexGenerator/issues"},"homepage":"https://github.com/playerljc/CTSJ-VuexGenerator#readme","publishConfig":{"access":"public"},"devDependencies":{"@babel/runtime":"^7.17.2","@ctsj/build":"^4.0.19","babel-plugin-import":"^1.13.3","rimraf":"^3.0.2","typescript":"^4.5.5","fs-extra":"^10.0.0","@umijs/fabric":"^2.10.1","eslint":"^8.9.0","husky":"^7.0.4","lint-staged":"^12.3.3","prettier":"^2.5.1","stylelint":"^14.5.0"},"dependencies":{"vue":"^3.2.31","vuex":"^4.0.2"},"types":".//lib/index.d.ts","gitHead":"159aefb75638a858373189d104e047829a571d74","_id":"@ctsj/vuexgenerator@2.0.2","_nodeVersion":"16.18.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-7B3kIioLV36EJr3avPzsCwjXhmQPdxG4uRd5XIZF1N01RsHhKRrMcRgHkxGB9Ij9dDy6pfYhjE9bATA4dSsBag==","shasum":"f0c506507e360672bbd7aceacd0e143e278376f2","tarball":"https://registry.npmjs.org/@ctsj/vuexgenerator/-/vuexgenerator-2.0.2.tgz","fileCount":16,"unpackedSize":117748,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCFegewOGzaMEo469Aj/ghEXqXk+913sjWDVISDS14awIhAIjxSzGS0048KcgeIfpcq4cE6IGRh6YNQ6tUjPjR1e0T"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwqdGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz3w//cfcpV48SWQyvNPFbAjSStDhQKbHQLzmpZlXCzHos/ektPE0p\r\nTgY1VvHN4tGuxYPUsWgiyBrYHqm3LntfIhxxOxlaFj7mjkpAZbEGZf4mVv+S\r\nTnZobFLEnzXYb2FOISlLWRdFV8kabpnt9NMYLGqGC9MFFvzvREToK3x+43CX\r\nqXpXUT0oN/JqFhotNGinBQt/IoWSuj1VGYm1wrlK9h9c9Nd2SkA9NTwl3jGA\r\nuouePimrc+0eTKu8b8cW/+5YpjnA5CEqrLYDACDt6ATIVNxlr/+J8e3lZKvX\r\nQAfA6rOm/0CJdnsUAnNta4ZNzvWaJ7eot9irTm9KPY5r6y/rFY9Tv7eLB/86\r\nqnnW/84IdCVYgnn3KTYGcMvcIHnE9XZuqeHMinagTJgejgHxHjnLRRN3HQ2R\r\nwi4XZH2Bqc/kv4QsuhNsCGnn5TWn0ISLD5T4dd5LQ8ya1hivRcBBPTv8n1go\r\nUCu9O4D83xKUsmf8q+NGytefea36TffnKjmpWdrF5bTsO4kY78vXL5/Hqq3E\r\nd4h4vfSnn6y5Z0TCN+GQAUqd4EA5jZgm4PVvPmF1P9W1v939jxMBXibpCncZ\r\n3Oeg1dGoNLzYAKMt1xTmaldHhtFFQnOjrQX6RWB+vLtpwRfPO8Ba0JUDrgE0\r\ndnWd3O5QewEag+rb2iG7PwQQYC9za+dSGns=\r\n=fMNw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vuexgenerator_2.0.2_1673701190334_0.6234451657746036"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-20T06:10:20.993Z","1.0.0":"2021-05-20T06:10:21.506Z","modified":"2023-01-14T12:59:50.603Z","2.0.0":"2022-02-16T09:20:50.556Z","1.0.1":"2023-01-14T00:10:07.698Z","2.0.2":"2023-01-14T12:59:50.512Z"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"description":"Vuex的生成器","homepage":"https://github.com/playerljc/CTSJ-VuexGenerator#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/playerljc/CTSJ-VuexGenerator.git"},"bugs":{"url":"https://github.com/playerljc/CTSJ-VuexGenerator/issues"},"license":"ISC","readme":"# CTSJ-VuexGenerator\r\n\r\nvuex 生成器，能通过 Service 自动映射成组件引用 vuex 的 State、Action 和 Mutation 并带有自动重置功能(此功能是一个 vuex 的插件)\r\n\r\n# 简介\r\n\r\n  一个简单的例子，用 vuex 编写一个标椎用户的模块，用户模块中是标准的 CRUD 操作，我们大致会这样去写\r\n\r\n1. 定义 UserService，UserService 大致会是这样\r\n\r\n```javascript\r\nimport { stringify } from 'qs';\r\nimport request from '@/utils/request';\r\n\r\n// 列表\r\nexport async function fetchtList(params) {\r\n return request.get('fetchList');\r\n}\r\n\r\n// 详情\r\nexport async function fetchtInfo(id) {\r\n return request.get('fetchtInfo');\r\n}\r\n\r\n// 添加\r\nexport async function fetchtSave(payload) {\r\n return request.post('fetchSave');\r\n}\r\n\r\n// 删除\r\nexport async function fetchtDelete(id) {\r\n return request.delete('fetchtDelete');\r\n}\r\n\r\n// 修改\r\nexport async function fetchtUpdate(payload) {\r\n return request.put('fetchtUpdate');\r\n}\r\n```\r\n\r\n2. 定义 UserModel，UserModel 大致会是这样\r\n\r\n```javascript\r\nimport {\r\n fetchtList,\r\n fetchtInfo,\r\n fetchtSave,\r\n fetchtDelete,\r\n fetchtUpdate,\r\n} from '@/services/UserService';\r\n\r\nexport default {\r\n namespace: true,\r\n state: {\r\n list: {\r\n list: [],\r\n total: 0,\r\n },\r\n info: {},\r\n },\r\n actions: {\r\n // 列表\r\n fetchList({ commit, state }, payload) {\r\n fetchtList(payload).then((response) => {\r\n if (response.code === 0) {\r\n commit('receive', {\r\n ...state,\r\n list: response.data,\r\n });\r\n }\r\n });\r\n },\r\n // 详情\r\n fetchInfo({ commit, state }, { id }) {\r\n fetchInfo(id).then((response) => {\r\n if (response.code === 0) {\r\n commit('receive', {\r\n ...state,\r\n info: response.data,\r\n });\r\n }\r\n });\r\n },\r\n // 添加\r\n feachSave({ commit, state }, { success, ...other }) {\r\n feachSave(other).then((response) => {\r\n if (response.code === 0) {\r\n if (success) {\r\n success();\r\n }\r\n }\r\n });\r\n },\r\n // 修改\r\n feachUpdate({ commit, state }, { success, ...other }) {\r\n feachUpdate(other).then((response) => {\r\n if (response.code === 0) {\r\n if (success) {\r\n success();\r\n }\r\n }\r\n });\r\n },\r\n // 删除\r\n feachDelete({ commit, state }, { success, id }) {\r\n feachDelete(id).then((response) => {\r\n if (response.code === 0) {\r\n if (success) {\r\n success();\r\n }\r\n }\r\n });\r\n },\r\n },\r\n mutations: {\r\n receive(state, payload) {\r\n const keys = Object.keys(state);\r\n for (let i = 0; i < keys.length; i++) {\r\n const key = keys[i];\r\n state[key] = payload[key];\r\n }\r\n },\r\n },\r\n};\r\n```\r\n\r\n3. 定义 UserPage, UserPage 大致会是这样\r\n```javascript\r\n\r\n\r\n```\r\n\r\n  我们会发现一个问题，像这样比较常规的 CRUD 操作，从 Service -> Model -> Component 的 computed 和 methods 方法的名字都是一一对应的， 而 Model 中的 actions 操作基本都是调用 Service 中相应的接口，并且注入到数据流当中，而且 Service 也是按照相应模块编写的比如 UserService 就是处理 User 相关的操作， 这样就和 Model 中的 namespace 相对应，再则 Model 中的 Mutations 里面应该只有一个 receive 的 Mutation， 不应该有多个处理，actions 中所有的 commit(mutation)都应该调用 commit('receive')来进行处理 所以我们就可以根据 Service 自动生成 computed 和 methods 和 Model 中的 actions 和 mutations， 我们只处理标椎模块，如果自动生成的这三部分不能满足需求，可以进行重写覆盖\r\n\r\n# 安装\r\n\r\n```javascript\r\n npm install @ctsj/vuexgenerator\r\n yarn add @ctsj/vuexgenerator\r\n```\r\n\r\n# 例子\r\n\r\n1. 定义 UserService\r\n\r\n```javascript\r\nimport { stringify } from 'qs';\r\nimport request from '@/utils/request';\r\n\r\n// 列表\r\nexport async function fetchtList(params) {\r\n return request.get('fetchList');\r\n}\r\n\r\n// 详情\r\nexport async function fetchtInfo(id) {\r\n return request.get('fetchtInfo');\r\n}\r\n\r\n// 添加\r\nexport async function fetchtSave(payload) {\r\n return request.post('fetchSave');\r\n}\r\n\r\n// 删除\r\nexport async function fetchtDelete(id) {\r\n return request.delete('fetchtDelete');\r\n}\r\n\r\n// 修改\r\nexport async function fetchtUpdate(payload) {\r\n return request.put('fetchtUpdate');\r\n}\r\n\r\n// 默认导出与接口先关的参数\r\nexport default {\r\n // 接口成功失败的状态键\r\n codeKey: 'code',\r\n // 接口成功的状态值\r\n codeSuccessKey: 200,\r\n // 接口数据的键\r\n dataKey: 'data',\r\n // 接口消息键\r\n messageKey: 'message',\r\n};\r\n```\r\n\r\n2. 定义 UserModel\r\n\r\n```javascript\r\nexport default {};\r\n```\r\n\r\n3. 定义 UserPage\r\n\r\n```javascript\r\n\r\n\r\n\r\n```\r\n\r\n4. 使用setup\r\n```javascript\r\n\r\n\r\n\r\n```\r\n\r\n5. 注册 Service(在一个单独的文件中 VuexGeneratorPlugin.js)\r\n\r\n```javascript\r\nimport VuexGenerator from '@ctsj/vuexgenerator';\r\n\r\nimport UserModel from '../modules/user';\r\nimport PersonModel from '../modules/person';\r\n\r\nfunction serviceRegister() {\r\n const requireComponent = require.context('../../service', false, /.*\\.(js)$/);\r\n\r\n const services = {};\r\n requireComponent.keys().forEach((fileName) => {\r\n const serviceKey = fileName.substring(2, fileName.length - 3);\r\n services[serviceKey] = requireComponent(fileName);\r\n });\r\n\r\n return services;\r\n}\r\n\r\n// 创建VuexGeneratorPlugin插件\r\nexport default VuexGenerator(serviceRegister(), {\r\n user: UserModel,\r\n person: PersonModel,\r\n});\r\n```\r\n\r\n6. 在 main.js 中进行引用插件\r\n\r\n```javascript\r\nimport { createApp } from 'vue'\r\nimport Antd from 'ant-design-vue'\r\n\r\nimport store from './store'\r\nimport router from './router'\r\nimport App from './App.vue'\r\n\r\nimport './registerServiceWorker'\r\n\r\nimport 'ant-design-vue/dist/antd.css'\r\n\r\ncreateApp(App).use(store).use(router).use(Antd).mount('#app')\r\n```\r\n\r\n# API\r\n\r\n- 工厂方法 - 创建 vuex 的插件(传入 ServiceConfig 和 Modules 的定义)\r\n\r\n- mapState - state 的辅助函数\r\n- mapActions - action 的辅助函数\r\n- mapMutations - Mutations 的辅助函数\r\n- useState - 在setup中获取数据的辅助函数\r\n- useMutations - 在setup中更新state的辅助函数\r\n- useActions - 在setup中进行异步更新state的辅助函数\r\n- cleanMixin - 用户自动重置 vuex 数据的 mixin\r\n\r\n# 其他\r\n\r\ndemo 目录下附带了一个 demo\r\n","readmeFilename":"README.md"}