{"_id":"@bartvanvliet/vuex-module-decorators","_rev":"2-489aaa410c642f06fbd99fd9d8bb7ac2","name":"@bartvanvliet/vuex-module-decorators","dist-tags":{"latest":"0.9.11"},"versions":{"0.9.10":{"name":"@bartvanvliet/vuex-module-decorators","version":"0.9.10","description":"Decorators to make class-like Vuex modules","public":true,"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","typings":"dist/types/index.d.ts","module":"dist/esm/index.js","scripts":{"clean":"rimraf dist .rpt2_cache","distclean":"rimraf .nyc_output coverage dist .rpt2_cache","prebuild":"npm run clean","build":"rollup -c","prepublishOnly":"npm run build","pretest":"npm run build && npm run lint","test":"cd test && mocha -r ts-node/register *.ts","test:dirty":"cd test && mocha -r ts-node/register *.ts","cover":"nyc npm test","prereport":"npm run cover","report":"nyc report --reporter lcov --reporter html","docs:build":"vuepress build docs","docs:serve":"vuepress dev docs","lint":"tslint -p tsconfig.json","lint:fix":"tslint -p tsconfig.json --fix"},"repository":{"type":"git","url":"git+https://github.com/championswimmer/vuex-module-decorators.git"},"keywords":["vuex","vue","typescript","decorators"],"author":{"name":"Arnav Gupta","email":"arnav@codingblocks.com"},"license":"MIT","bugs":{"url":"https://github.com/championswimmer/vuex-module-decorators/issues"},"peerDependencies":{"vue":">=2","vuex":"3"},"homepage":"https://github.com/championswimmer/vuex-module-decorators#readme","devDependencies":{"@types/chai":"^4.1.7","@types/mocha":"^5.2.5","chai":"^4.2.0","mocha":"^5.2.0","mock-local-storage":"^1.1.8","nyc":"^13.2.0","prettier":"^1.16.4","rimraf":"^2.6.3","rollup":"^1.1.2","rollup-plugin-typescript2":"^0.19.2","rollup-plugin-uglify":"^6.0.2","ts-node":"^7.0.1","tslint":"^5.12.1","tslint-config-prettier":"^1.18.0","tslint-config-standard":"^8.0.1","tslint-plugin-prettier":"^2.0.1","typescript":"^3.3.3","vue":"^2.6.6","vuepress":"^0.14.8","vuex":"^3.1.0","vuex-persist":"^2.0.0"},"dependencies":{},"engines":{"node":">= 8","npm":">= 5","yarn":">= 1"},"gitHead":"d88e1f4a4dc0dadbaabf908a48cbc0bb71154dbe","_id":"@bartvanvliet/vuex-module-decorators@0.9.10","_npmVersion":"6.4.1","_nodeVersion":"8.15.0","_npmUser":{"name":"bartvanvliet","email":"bart.van.vliet@hotmail.com"},"dist":{"integrity":"sha512-fGXn9dFyxS9fdBuK76neSKm402CAv5amyZ0p5W1o1oh3uhZ5CIUYnKTtJrOSmWkM6LrOJoM2k0HsRyt0W8AbWw==","shasum":"005999e1496f7858bf84866134387f491a75c57e","tarball":"https://registry.npmjs.org/@bartvanvliet/vuex-module-decorators/-/vuex-module-decorators-0.9.10.tgz","fileCount":21,"unpackedSize":696134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKlZxCRA9TVsSAnZWagAAWuIP/0A7XxYExKbbSyyK+EHm\nNqwkx0NHtyMnLe0mI9boeww7io2+O3Hi9j/pSPD4R3pmVuPQ4DugP7q0i0u7\n8FP9BI4KL90e+Zlq5dmXe28PmkydGCKr6EkxgdIw/wm+k+HssKpqCrxkQJ5f\nQ5DGoikG9hLi0oOivqWJDn4jzkg4IGNDEuLhUe6DS+ck2kkHL8gJQLpTe0Lo\nLX49QvPALjMDSFwS2vLSPMnA4N3vRAQO+e4vur40tZjkfACu91GwH5Q5uMjh\nWY2ZmoUqch2Z8g9n9fDKUpMV6443+ZrpD9jWHEcJlkwYXdA4WIpGitQDho+w\nLMeYhRgbY0+VHZv5UzjvFWVh/XWbi1BYlMfR/sr8ircl6HfvBzYySRe6UiW4\ngbx3HzOriONvPlumgg7oVAUEJ/fL5ypRwZzp+P+j1nrAEOHgMlqp6U3swroQ\nF5aLUFXHDlZ9f/Y20dV/04uvjmyxlff3/W4pgaYBb9HjHHNNbporChWdUHAQ\ncl/Z1yXzTZsFl/Qn9DIbc46PEYuCKbGFgv+s/KobCj/uYXK83NLNMeXhYUYV\nIYz2neAlck6LxY6H+FRg/34veQ5lU61x/YMwEvfWLqwcEAn7CXTSwdeX7viU\n13RjjfgAVagFRKJul+606DhN5IQkbVQtcsj0c5LuTNO+/mWQvX6zGEzcFO26\nJkXq\r\n=uS6L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIu4FAmx9nazz/pjZS3aG8BaKci0SXF62+hxnKLtitYAIgdPvfepSauBOJ20RiXkD93zYKPgX6Ick0urKT3JY+8WA="}]},"maintainers":[{"name":"bartvanvliet","email":"bart.van.vliet@hotmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vuex-module-decorators_0.9.10_1563055728313_0.24408406223773227"},"_hasShrinkwrap":false},"0.9.11":{"name":"@bartvanvliet/vuex-module-decorators","version":"0.9.11","description":"Decorators to make class-like Vuex modules","public":true,"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","typings":"dist/types/index.d.ts","module":"dist/esm/index.js","scripts":{"clean":"rimraf dist .rpt2_cache","distclean":"rimraf .nyc_output coverage dist .rpt2_cache","prebuild":"npm run clean","build":"rollup -c","prepublishOnly":"npm run build","pretest":"npm run build && npm run lint","test":"cd test && mocha -r ts-node/register *.ts","test:dirty":"cd test && mocha -r ts-node/register *.ts","cover":"nyc npm test","prereport":"npm run cover","report":"nyc report --reporter lcov --reporter html","docs:build":"vuepress build docs","docs:serve":"vuepress dev docs","lint":"tslint -p tsconfig.json","lint:fix":"tslint -p tsconfig.json --fix"},"repository":{"type":"git","url":"git+https://github.com/Kapulara/vuex-module-decorators.git"},"keywords":["vuex","vue","typescript","decorators"],"author":{"name":"Arnav Gupta","email":"arnav@codingblocks.com"},"license":"MIT","bugs":{"url":"https://github.com/Kapulara/vuex-module-decorators/issues"},"peerDependencies":{"vue":">=2","vuex":"3"},"homepage":"https://github.com/Kapulara/vuex-module-decorators#readme","devDependencies":{"@types/chai":"^4.1.7","@types/mocha":"^5.2.5","chai":"^4.2.0","mocha":"^5.2.0","mock-local-storage":"^1.1.8","nyc":"^13.2.0","prettier":"^1.16.4","rimraf":"^2.6.3","rollup":"^1.1.2","rollup-plugin-typescript2":"^0.19.2","rollup-plugin-uglify":"^6.0.2","ts-node":"^7.0.1","tslint":"^5.12.1","tslint-config-prettier":"^1.18.0","tslint-config-standard":"^8.0.1","tslint-plugin-prettier":"^2.0.1","typescript":"^3.3.3","vue":"^2.6.6","vuepress":"^0.14.8","vuex":"^3.1.0","vuex-persist":"^2.0.0"},"dependencies":{},"engines":{"node":">= 8","npm":">= 5","yarn":">= 1"},"gitHead":"55a1ed2539c07ab0ef47dfafc7abdd1f62854db2","_id":"@bartvanvliet/vuex-module-decorators@0.9.11","_npmVersion":"6.4.1","_nodeVersion":"8.15.0","_npmUser":{"name":"bartvanvliet","email":"bart.van.vliet@hotmail.com"},"dist":{"integrity":"sha512-e3H0mXWhxo060DANTPEho+2FGyUEPE+QUrWA7lj/q4fkt0YrKrZbwHAAnj2QI4OvKchBQOJp/GmYDosAIdXXaQ==","shasum":"d142967765acfdcc3660fa7bd524ab0a0b17fa86","tarball":"https://registry.npmjs.org/@bartvanvliet/vuex-module-decorators/-/vuex-module-decorators-0.9.11.tgz","fileCount":21,"unpackedSize":696581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKli1CRA9TVsSAnZWagAAoKkP/2pFX1eAQw7vP4uLlshH\nOOAm0OU4fRVN/TeyImrf5qy+FtUpD8sp28x0a8f/LYRoJp1TIklRJ3K8e+Ab\ntm5W7YgkkSHrudzGHgT/0BQm4s2mgwFAiyODc+mSPclibpA2uTZ481CPoMER\n7BJUZWaGE9z5HZFNthmPaPV7FcU39hSvLksl8rn/u+qeD9iTeK+yWJTYNjpq\nbNM1efAfF0Zf4G25Z+dlCsnXpVF7ii/DnZBLqSTDSpmYLhUnKCFEy6Z2gtNo\nurfPAd7d1kTM4cBfFXxAtHS89C5YUaIcNPRBlvo/1jgJXD2v8JSSGhL46fAg\nBdgl2mPUU6063WNWHvK0lv/lxod6SMWc2LrNcBYetpkD+iBcZHPnviH7YEUS\nsf7AddRj9mRmsWZfFY3+pVwxvYZWWaKcaHWrYzch+0VmwRDwTjwUcu3H5ByY\nCRHgj1dUSpQX7bOG87ZKeTZ1zMMBwvH47UkN3/oH/7wSGnFdRom3T6B2WzWp\nohv3Srm57Qw9vsN2+lLy3iB37QDpKtTQZa3ss774WG67ib4TlyMhKUdj+v9l\nCNjSgeX1MGJfmi/hDAMOUaa6YtoSkJ2UiXn2g0nXoRrV6y8GshtynIgWbY1l\nTlImFKEnH4qZPu5ctpAwBLus+LTjkDBjlnYfiQUePEAx5RWzODulVk32TmWf\nK4oo\r\n=9B5b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDL6XGGDJDso7bv3OeiX1peAA/fMp9GURfGAzB3Kou6KAiEAiM1QpNq1wkSgeth9gsd0WjIwpGt5GO3L5hrtRWP5+E4="}]},"maintainers":[{"name":"bartvanvliet","email":"bart.van.vliet@hotmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vuex-module-decorators_0.9.11_1563056309056_0.8141586765463311"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-13T22:08:48.111Z","0.9.10":"2019-07-13T22:08:48.477Z","modified":"2022-04-04T17:44:55.937Z","0.9.11":"2019-07-13T22:18:29.187Z"},"maintainers":[{"name":"bartvanvliet","email":"bart.van.vliet@hotmail.com"}],"description":"Decorators to make class-like Vuex modules","homepage":"https://github.com/Kapulara/vuex-module-decorators#readme","keywords":["vuex","vue","typescript","decorators"],"repository":{"type":"git","url":"git+https://github.com/Kapulara/vuex-module-decorators.git"},"author":{"name":"Arnav Gupta","email":"arnav@codingblocks.com"},"bugs":{"url":"https://github.com/Kapulara/vuex-module-decorators/issues"},"license":"MIT","readme":"# 🚧 IMPORTANT 🚧\n\nI forked this library from [championswimmer/vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators) since I required having support for [championswimmer/vuex-persist](https://github.com/championswimmer/vuex-persist) in one of my packages. \n\nOnce the pull request I created get's merged I will deprecate this package.\n\nLatest info in: [Pull Request](https://github.com/championswimmer/vuex-module-decorators/pull/102)\n\n# vuex-module-decorators\n\n[![Usage Guide](https://img.shields.io/badge/usage-guide-1e90ff.svg?style=for-the-badge&longCache=true)](https://championswimmer.in/vuex-module-decorators/)    \nDetailed Guide: https://championswimmer.in/vuex-module-decorators/ \n\nTypescript/ES7 Decorators to make Vuex modules a breeze\n\n[![Build Status](https://travis-ci.org/championswimmer/vuex-module-decorators.svg?branch=master)](https://travis-ci.org/championswimmer/vuex-module-decorators)\n[![npm:size:gzip](https://img.shields.io/bundlephobia/minzip/vuex-module-decorators.svg?label=npm:size:gzip)](https://bundlephobia.com/result?p=vuex-module-decorators)\n[![cdn:min:gzip](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/vuex-module-decorators.svg?label=cdn:min:gzip&compression=gzip)](https://cdn.jsdelivr.net/npm/vuex-module-decorators/dist/cjs/index.min.js)\n[![codecov](https://codecov.io/gh/championswimmer/vuex-module-decorators/branch/master/graph/badge.svg)](https://codecov.io/gh/championswimmer/vuex-module-decorators)\n[![npm](https://img.shields.io/npm/v/vuex-module-decorators.svg)](https://www.npmjs.com/package/vuex-module-decorators)\n[![npm](https://img.shields.io/npm/dw/vuex-module-decorators.svg?colorB=ff0033)](https://www.npmjs.com/package/vuex-module-decorators)\n![npm type definitions](https://img.shields.io/npm/types/vuex-module-decorators.svg)\n[![Maintainability](https://api.codeclimate.com/v1/badges/5b1dfa8d3d4bdf409b60/maintainability)](https://codeclimate.com/github/championswimmer/vuex-module-decorators/maintainability)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b7944c579d5c4c1d949f71a91a538d77)](https://www.codacy.com/app/championswimmer/vuex-module-decorators?utm_source=github.com&utm_medium=referral&utm_content=championswimmer/vuex-module-decorators&utm_campaign=Badge_Grade)\n[![codebeat badge](https://codebeat.co/badges/0272746c-8a7d-428b-a20d-387d22bfbcfb)](https://codebeat.co/projects/github-com-championswimmer-vuex-module-decorators-master)\n[![Total alerts](https://img.shields.io/lgtm/alerts/g/championswimmer/vuex-module-decorators.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/championswimmer/vuex-module-decorators/alerts/)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/championswimmer/vuex-module-decorators.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/championswimmer/vuex-module-decorators/context:javascript)\n\n## CHANGELOG\n - There are major type-checking changes (could be breaking) in v0.9.7 \n\n - There are major usage improvements (non backwards compatible) in 0.8.0\n\nPlease check [CHANGELOG](CHANGELOG.md)\n\n\n## Examples\n\nRead the rest of the README to figure out how to use, or if you readily want to jump into a production codebase and see how this is used, you can check out -\n\n- <https://github.com/Armour/vue-typescript-admin-template>\n- <https://github.com/xieguangcai/vue-order-admin>\n- <https://github.com/coding-blocks-archives/realworld-vue-typescript>\n\n## Installation\n\n```shell\nnpm install -D vuex-module-decorators\n```\n\n### Babel 6/7\n\n> **NOTE** This is **not** necessary for `vue-cli@3` projects, since `@vue/babel-preset-app` already includes this plugin\n\n1. You need to install `babel-plugin-transform-decorators`\n\n### TypeScript\n\n1. set `experimentalDecorators` to true\n2. For reduced code with decorators, set `importHelpers: true` in `tsconfig.json`\n3. *(only for TypeScript 2)* set `emitHelpers: true` in `tsconfig.json`\n\n## Configuration\n\n### Using with `target: es5`\n\n> **NOTE** Since version `0.9.3` we distribute as ES5, so this section is applicable only to v0.9.2 and below\n\nThis package generates code in `es2015` format. If your Vue project targets ES6 or ES2015 then\nyou need not do anything. But in case your project uses `es5` target (to support old browsers), then\nyou need to tell Vue CLI / Babel to transpile this package.\n\n```js\n// in your vue.config.js\nmodule.exports = {\n  /* ... other settings */\n  transpileDependencies: ['vuex-module-decorators']\n}\n```\n\n## Usage\n\n#### The <strike>conventional</strike> old & boring way\n\nRemember how vuex modules used to be made ?\n\n```js\nconst moduleA = {\n  state: { ... },\n  mutations: { ... },\n  actions: { ... },\n  getters: { ... }\n}\n\nconst moduleB = {\n  state: { ... },\n  mutations: { ... },\n  actions: { ... }\n}\n\nconst store = new Vuex.Store({\n  modules: {\n    a: moduleA,\n    b: moduleB\n  }\n})\n```\n\n#### Hello Decorators !\n\nWell not anymore. Now you get better syntax. Inspired by `vue-class-component`\n\n```typescript\nimport { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'\n\n@Module\nexport default class Counter2 extends VuexModule {\n  count = 0\n\n  @Mutation\n  increment(delta: number) {\n    this.count += delta\n  }\n  @Mutation\n  decrement(delta: number) {\n    this.count -= delta\n  }\n\n  // action 'incr' commits mutation 'increment' when done with return value as payload\n  @Action({ commit: 'increment' })\n  incr() {\n    return 5\n  }\n  // action 'decr' commits mutation 'decrement' when done with return value as payload\n  @Action({ commit: 'decrement' })\n  decr() {\n    return 5\n  }\n}\n```\n\n#### async MutationAction === magic\n\nWant to see something even better ?\n\n```typescript\nimport { Module, VuexModule, MutationAction } from 'vuex-module-decorators'\nimport { ConferencesEntity, EventsEntity } from '@/models/definitions'\n\n@Module\nexport default class HGAPIModule extends VuexModule {\n  conferences: Array<ConferencesEntity> = []\n  events: Array<EventsEntity> = []\n\n  // 'events' and 'conferences' are replaced by returned object\n  // whose shape must be `{events: [...], conferences: [...] }`\n  @MutationAction({ mutate: ['events', 'conferences'] })\n  async fetchAll() {\n    const response: Response = await getJSON('https://hasgeek.github.io/events/api/events.json')\n    return response\n  }\n}\n```\n\n#### Automatic getter detection\n\n```typescript\n@Module\nclass MyModule extends VuexModule {\n  wheels = 2\n\n  @Mutation\n  incrWheels(extra) {\n    this.wheels += extra\n  }\n\n  get axles() {\n    return this.wheels / 2\n  }\n}\n```\n\nthis is turned into the equivalent\n\n```javascript\nconst module = {\n  state: { wheels: 2 },\n  mutations: {\n    incrWheels(state, extra) {\n      state.wheels += extra\n    }\n  },\n  getters: {\n    axles: (state) => state.wheels / 2\n  }\n}\n```\n\n### Putting into the store\n\nUse the modules just like you would earlier\n\n```typescript\nimport Vue from 'nativescript-vue'\nimport Vuex, { Module } from 'vuex'\n\nimport counter from './modules/Counter2'\nimport hgapi from './modules/HGAPIModule'\n\nVue.use(Vuex)\n\nconst store = new Vuex.Store({\n  state: {},\n  modules: {\n    counter,\n    hgapi\n  }\n})\n```\n\n### Module re-use, use with NuxtJS\n\nIf you need to support [module reuse](https://vuex.vuejs.org/guide/modules.html#module-reuse)\nor to use modules with NuxtJS, you can have a state factory function generated instead\nof a staic state object instance by using `stateFactory` option to `@Module`, like so:\n\n```typescript\n@Module({ stateFactory: true })\nclass MyModule extends VuexModule {\n  wheels = 2\n\n  @Mutation\n  incrWheels(extra) {\n    this.wheels += extra\n  }\n\n  get axles() {\n    return this.wheels / 2\n  }\n}\n```\n\nthis is turned into the equivalent\n\n```javascript\nconst module = {\n  state() {\n    return { wheels: 2 }\n  },\n\n  mutations: {\n    incrWheels(state, extra) {\n      state.wheels += extra\n    }\n  },\n  getters: {\n    axles: (state) => state.wheels / 2\n  }\n}\n```\n\n### Dynamic Modules\n\nVuex allows us to register modules into store at runtime after store is\nconstructed. We can do the following to create dynamic modules\n\n```typescript\ninterface StoreType {\n  mm: MyModule\n}\n// Declare empty store first\nconst store = new Vuex.Store<StoreType>({})\n\n// Create module later in your code (it will register itself automatically)\n// In the decorator we pass the store object into which module is injected\n// NOTE: When you set dynamic true, make sure you give module a name\n@Module({ dynamic: true, store: store, name: 'mm' })\nclass MyModule extends VuexModule {\n  count = 0\n\n  @Mutation\n  incrCount(delta) {\n    this.count += delta\n  }\n}\n```\n\nIf you would like to preserve the state e.g when loading in the state from [vuex-persist](https://www.npmjs.com/package/vuex-persist)\n\n\n```diff\n...\n\n-- @Module({ dynamic: true, store: store, name: 'mm' })\n++ @Module({ dynamic: true, store: store, name: 'mm', preserveState: true })\nclass MyModule extends VuexModule {\n\n...\n```\n\nOr when it doesn't have a initial state and you load the state from the localStorage\n\n\n```diff\n...\n\n-- @Module({ dynamic: true, store: store, name: 'mm' })\n++ @Module({ dynamic: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })\nclass MyModule extends VuexModule {\n\n...\n```\n### Accessing modules with NuxtJS\n\nThere are many possible ways to construct your modules. Here is one way for drop-in use with NuxtJS (you simply need to add your modules to `~/utils/store-accessor.ts` and then just import the modules from `~/store`):\n\n`~/store/index.ts`:\n```\nimport { Store } from 'vuex'\nimport { initialiseStores } from '~/utils/store-accessor'\nconst initializer = (store: Store<any>) => initialiseStores(store)\nexport const plugins = [initializer]\nexport * from '~/utils/store-accessor'\n```\n\n`~/utils/store-accessor.ts`:\n```\nimport { Store } from 'vuex'\nimport { getModule } from 'vuex-module-decorators'\nimport example from '~/store/example'\n\nlet exampleStore: example\n\nfunction initialiseStores(store: Store<any>): void {\n  exampleStore = getModule(example, store)\n}\n\nexport {\n  initialiseStores,\n  exampleStore,\n}\n```\n\nNow you can access stores in a type-safe way by doing the following from a component or page - no extra initialization required.\n\n```\nimport { exampleStore } from '~/store'\n...\nsomeMethod() {\n  return exampleStore.exampleGetter\n}\n```\n","readmeFilename":"README.md"}