[
{
"path": ".gitignore",
"content": "node_modules\n/lib\n/commonjs\n/example/build.js\n/example/build.js.map\n"
},
{
"path": ".vscode/settings.json",
"content": "{\n \"editor.rulers\": [ 120 ],\n \"prettier.printWidth\": 120,\n \"prettier.disableLanguages\": [],\n\n \"[typescript]\": {\n \"editor.formatOnSave\": true\n },\n \"[vue]\": {\n \"editor.formatOnSave\": true\n },\n \"tslint.autoFixOnSave\": true,\n\n \"vetur.format.defaultFormatter.html\": \"none\",\n \"vetur.format.defaultFormatter.ts\": \"none\"\n}"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2018 gertqin\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# vuex-class-modules\n\nThis is yet another package to introduce a simple type-safe class style syntax for your vuex modules, inspired by [vue-class-component](https://github.com/vuejs/vue-class-component).\n\n[](https://www.npmjs.com/package/vuex-class-modules)\n\n## Installation\n\n`npm install vuex-class-modules`\n\nAnd make sure to have the `--experimentalDecorators` flag enabled.\n\nBoth a `commonjs` and a `esm` module build are published. If you have a webpack-based setup, it will use the `esm` modules by default.\n\n## Usage\n\nVuex modules can be written using decorators as a class:\n\n```typescript\n// user-module.ts\nimport { VuexModule, Module, Mutation, Action } from \"vuex-class-modules\";\n\n@Module\nclass UserModule extends VuexModule {\n // state\n firstName = \"Foo\";\n lastName = \"Bar\";\n\n // getters\n get fullName() {\n return this.firstName + \" \" + this.lastName;\n }\n\n // mutations\n @Mutation\n setFirstName(firstName: string) {\n this.firstName = firstName;\n }\n @Mutation\n setLastName(lastName: string) {\n this.lastName = lastName;\n }\n\n // actions\n @Action\n async loadUser() {\n const user = await fetchUser();\n this.setFirstName(user.firstName);\n this.setLastName(user.lastName);\n }\n}\n\n// register module (could be in any file)\nimport store from \"path/to/store\";\nexport const userModule = new UserModule({ store, name: \"user\" });\n```\n\nThe module will automatically be registered to the store as a namespaced dynamic module when it is instantiated. (The modules are namespaced to avoid name conflicts between modules for getters/mutations/actions.)\n\nThe module can then be used in vue components as follows:\n\n```ts\n// MyComponent.vue\nimport Vue from \"vue\";\nimport { userModule } from \"path/to/user-module.ts\";\n\nexport class MyComponent extends Vue {\n get firstName() {\n return userModule.firstName; // -> store.state.user.firstName\n }\n get fullName() {\n return userModule.fullName; // -> store.getters[\"user/fullName]\n }\n\n created() {\n userModule.setFirstName(\"Foo\"); // -> store.commit(\"user/setFirstName\", \"Foo\")\n userModule.loadUser(); // -> store.dispatch(\"user/loadUser\")\n }\n}\n```\n\n### What about `rootState` and `rootGetters`?\n\nThere are two ways to access other modules within a module, or dispatch actions to other modules.\n\n1. Simply import the instantiated module (suitable if the modules are instantiated in the same file as they are defined):\n\n```ts\n// my-module.ts\n\n// import the module instance\nimport { otherModule } from \"./other-module\";\n\n@Module\nclass MyModule extends VuexModule {\n get myGetter() {\n return otherModule.foo;\n }\n\n @Action\n async myAction() {\n await otherModule.someAction();\n // ...\n }\n}\n```\n\n2. The other module can be registered through the constructor (suitable if the modules are instantiated elsewhere)\n\n```ts\n// my-module.ts\n\n// import the class, not the instance\nimport { OtherModule } from \"./other-module\";\n\n@Module\nexport class MyModule extends VuexModule {\n private otherModule: OtherModule;\n\n constructor(otherModule: OtherModule, options: RegisterOptions) {\n super(options);\n this.otherModule = otherModule;\n }\n\n get myGetter() {\n return this.otherModule.foo;\n }\n\n @Action\n async myAction() {\n await this.otherModule.someAction();\n // ...\n }\n}\n\n// register-modules.ts\nimport store from \"path/to/store\";\nimport { OtherModule } from \"path/to/other-module\";\nimport { MyModule } from \"path/to/my-module\";\n\nexport const otherModule = new OtherModule({ store, name: \"otherModule\" });\nexport const myModule = new MyModule(otherModule, { store, name: \"myModule\" });\n```\n\nThe local modules will not be part of the state and cannot be accessed from the outside, so they should always be declared private.\n\n```ts\nmyModule.otherModule; // -> undefined\n```\n\n### The `store.watch` function\n\nVuex can also be used ouside of vue modules. To listen for changes to the state, vuex provides a [watch method](https://vuex.vuejs.org/api/#watch).\n\nThis api is also provided by vuex-class-modules under the method name `$watch` to prevent name collisions. For example you can do:\n\n```ts\nimport store from \"./store\";\nimport { MyModule } from \"./my-module\";\n\nconst myModule = new MyModule({ store, name: \"MyModule\" });\nmyModule.$watch(\n (theModule) => theModule.fullName,\n (newName: string, oldName: string) => {\n // ...\n },\n {\n deep: false,\n immediate: false,\n }\n);\n```\n\nand to unwatch:\n\n```ts\nconst unwatch = myModule.$watch(...);\nunwatch();\n```\n\n### Register options\n\n- `name` [required]: Name of the module\n- `store` [required]: The vuex store - which can just be instantiated as empty:\n\n```ts\n// store.ts\nimport Vue from \"vue\";\nimport Vuex from \"vuex\";\nVue.use(Vuex);\nconst store = new Vuex.Store({});\n```\n\n### Module options\n\nThe module decorator can also accept options:\n\n- `generateMutationSetters` [optional, default=false]: Whether automatic mutation setters for the state properties should be generated, see [Generate Mutation Setters](#generate-mutation-setters).\n\n## Example\n\nThe vuex shopping cart example rewritten using `vue-class-component` and `vuex-class-modules` can be found in the [example directory](/example). Build the example using:\n\n`npm run example`\n\n## Caveats of `this`\n\nAs for vue-class-component `this` inside the module is just a proxy object to the store. It can therefore only access what the corresponding vuex module function would be able to access:\n\n```ts\n@Module\nclass MyModule extends VuexModule {\n foo = \"bar\";\n\n get someGetter() {\n return 123;\n }\n get myGetter() {\n this.foo; // -> \"bar\"\n this.someGetter; // -> 123\n this.someMutation(); // undefined, getters cannot call mutations\n this.someAction(); // -> undefined, getters cannot call actions\n }\n\n @Mutation\n someMutation() {\n /* ... */\n }\n @Mutation\n myMutation() {\n this.foo; // -> \"bar\"\n this.someGetter; // -> undefined, mutations dont have access to getters\n this.someMutation(); // -> undefined, mutations cannot call other mutations\n this.someAction(); // -> undefined, mutations cannot call actions\n }\n\n @Action\n async someAction() {\n /* ... */\n }\n @Action\n async myAction() {\n this.foo; // -> \"bar\"\n this.someGetter; // -> 123\n this.myMutation(); // Ok\n await this.someAction(); // Ok\n }\n}\n```\n\n## Local Functions\n\nThe module can have non-mutation/action functions which can be used inside the module. As for local modules, these functions will not be exposed outside the module and should therefore be private. `this` will be passed on to the local function from the getter/mutation/action.\n\n```ts\n@Module\nclass MyModule extends VuexModule {\n get myGetter() {\n return myGetterHelper();\n }\n private myGetterHelper() {\n // same 'this' context as myGetter\n }\n\n @Mutation\n myMutation() {\n this.myMutationHelper();\n }\n\n // should be private\n myMutationHelper() { /* ... */}\n}\nconst myModule = new MyModule({ store, name: \"myModule });\nmyModule.myMutationHelper // -> undefined.\n```\n\n## Generate Mutation Setters\n\nAs I often find myself writing a lot of simple setter mutations like\n\n```ts\n@Module\nclass UserModule extends VuexModule {\n firstName = \"Foo\";\n lastName = \"Bar\";\n\n @Mutation\n setFirstName(firstName: string) {\n this.firstName = firstName;\n }\n @Mutation\n setLastName(lastName: string) {\n this.lastName = lastName;\n }\n}\n```\n\na module option `generateMutationSetters` has been added, which when enabled will generate a setter mutation for each state property. The state can then be modified directly from the actions:\n\n```ts\n@Module({ generateMutationSetters: true })\nclass UserModule extends VuexModule {\n firstName = \"Foo\";\n lastName = \"Bar\";\n\n // Auto generated:\n // @Mutation set__firstName(val: any) { this.firstName = val }\n // @Mutation set__lastName(val: any) { this.lastName = val }\n\n @Action\n async loadUser() {\n const user = await fetchUser();\n this.firstName = user.firstName; // -> this.set__firstName(user.firstName);\n this.lastName = user.lastName; // -> this.set__lastName(user.lastName);\n }\n}\n```\n\n_NOTE:_ Setters are only generated for root-level state properties, so in order to update a property of an object you have to use a mutation or replace the entire object:\n\n```ts\n@Module({ generateMutationSetters: true })\nclass UserModule extends VuexModule {\n user = {\n id: 123,\n name: \"Foo\",\n };\n\n @Mutation\n setUserName() {\n this.user.name = \"Bar\"; // OK!\n }\n\n @Action\n async loadUser() {\n this.user.name = \"Bar\"; // Bad, the state is mutated outside a mutation\n this.user = { ...this.user, name: \"Bar\" }; // OK!\n }\n}\n```\n\n## Vite HMR\n\n[Vite](https://vitejs.dev/) (and possibly other bundlers) uses `import.meta.hot` for HMR, which `vuex-class-modules` doesn't support currently. Instead a static property\n\n```ts\nVuexModule.__useHotUpdate = true; // default false\n```\n\nis provided, which will force hot updates to the store instead of throwing an error when a module with a duplicate name is registered. This could for instance be set only in dev mode\n\n```ts\nVuexModule.__useHotUpdate = import.meta.env.DEV;\n```\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n"
},
{
"path": "example/index.html",
"content": "\n\n\n \n \n Vuex Class Modules Example\n \n \n \n \n \n"
},
{
"path": "example/src/api/shop.ts",
"content": "/**\n * Mocking client-server processing\n */\nexport interface Product {\n id: number;\n title: string;\n price: number;\n inventory: number;\n}\n\nexport interface CartItem {\n id: number;\n quantity: number;\n}\n\nconst products: Product[] = [\n { id: 1, title: \"iPad 4 Mini\", price: 500.01, inventory: 2 },\n { id: 2, title: \"H&M T-Shirt White\", price: 10.99, inventory: 10 },\n { id: 3, title: \"Charli XCX - Sucker CD\", price: 19.99, inventory: 5 }\n];\n\nexport default {\n async getProducts() {\n await new Promise(resolve => setTimeout(resolve, 100));\n return products;\n },\n\n async buyProducts(items: CartItem[]) {\n await new Promise(resolve => setTimeout(resolve, 100));\n\n if (Math.random() > 0.5) {\n throw Error();\n }\n }\n};\n"
},
{
"path": "example/src/app.ts",
"content": "import Vue from \"vue\";\nimport App from \"./components/App.vue\";\nimport store from \"./store\";\n\nnew Vue({\n el: \"#app\",\n store,\n render: h => h(App)\n});\n"
},
{
"path": "example/src/components/App.vue",
"content": "\n