{"id":17041372,"url":"https://github.com/davestewart/vue-class-store","last_synced_at":"2025-04-05T12:08:53.955Z","repository":{"id":42830378,"uuid":"264030350","full_name":"davestewart/vue-class-store","owner":"davestewart","description":"Universal Vue stores you write once and use anywhere","archived":false,"fork":false,"pushed_at":"2023-10-03T18:23:29.000Z","size":618,"stargazers_count":277,"open_issues_count":21,"forks_count":13,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-01T20:18:55.067Z","etag":null,"topics":["reactive","simple","state-management","stores","vue","vuex"],"latest_commit_sha":null,"homepage":"https://github.com/davestewart/vue-class-store-demos","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davestewart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-14T21:35:35.000Z","updated_at":"2024-09-12T09:32:06.000Z","dependencies_parsed_at":"2024-09-18T16:37:05.570Z","dependency_job_id":"de85303b-6d1a-499f-acbe-b58f62852132","html_url":"https://github.com/davestewart/vue-class-store","commit_stats":{"total_commits":50,"total_committers":2,"mean_commits":25.0,"dds":"0.020000000000000018","last_synced_commit":"cae1dc8aeff7aab85198864c9dfdad1744ff5f67"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davestewart%2Fvue-class-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davestewart%2Fvue-class-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davestewart%2Fvue-class-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davestewart%2Fvue-class-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davestewart","download_url":"https://codeload.github.com/davestewart/vue-class-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332612,"owners_count":20921853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reactive","simple","state-management","stores","vue","vuex"],"created_at":"2024-10-14T09:12:17.464Z","updated_at":"2025-04-05T12:08:53.933Z","avatar_url":"https://github.com/davestewart.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Class Store\n\n\u003e Universal Vue stores you write once and use anywhere\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/davestewart/vue-class-store/master/docs/logo.png\" alt=\"Vue Class Store logo\"\u003e\n\u003c/p\u003e\n\n## Abstract\n\n### So Vue, Vuex and Vue Class Store walk into a bar...\n\n**Vue says:** \"I'll give you reactivity, computed properties and watches, but only in components, only using a special objects-and-function schema, and I demand initial values be passed in from a parent component using props! I don't get along particularly well with TypeScript either, so good luck with figuring that one out, buddy\"\n\n**Vuex says:** \"I'll give you global reactivity and computed properties, but I'm going to call them esoteric names and require you set them up globally with a convoluted schema, access them only through a centralised store, and I'll force you to make all updates through string-based paths, with different formats, helpers, terminology and best practices. I'll also make it difficult to go more than a couple of levels deep, and I'll give you watches but you'll hate them so probably best not to use those either\"\n\n**Vue Class Store says:** \"I'll give you reactivity, computed properties and watches, written in standard JavaScript or TypeScript, with no setup or boilerplate, and you can use me anywhere\"\n\n*The end*\n\n## Usage\n\n### Installation\n\nInstall the package from NPM:\n\n```bash\n#vue 2\nnpm i vue-class-store@^2.0.0\n\n#vue 3\nnpm i vue-class-store@^3.0.0\n```\n\nYarn users, replace `npm i` with `yarn add`.\n\n### Declaration\n\nWrite classes as normal, and add the decorator `@VueStore` to those you want to become reactive.\n\n```typescript\nimport VueStore from 'vue-class-store'\n\n@VueStore\nexport class Store {\n  // properties are rebuilt as reactive data values\n  public value: number\n\n  // getters are converted to (cached) computed properties\n  public get double (): number {\n    return this.value * 2\n  }\n\n  // constructor parameters serve as props\n  constructor (value: number = 1) {\n    // constructor function serves as the created hook\n    this.value = value\n  }\n\n  // prefix properties with `on:` to convert to watches\n  'on:value' () {\n    console.log('value changed to:', this.value)\n  }\n\n  // you can even drill into sub properties!\n  'on:some.other.value' = 'log'\n\n  // class methods are added as methods\n  log () {\n    console.log('value is:', this.value)\n  }\n}\n```\n\n### Instantiation\n\nTo use a store, simply instantiate the class.\n\nYou can do this outside of a component, and it will be completely reactive:\n\n```typescript\nconst store = new Store({ ... })\n```\n\nOr you can instantiate within a component:\n\n```javascript\nexport default {\n  ...\n  computed: {\n    model () {\n      return new Store({ ... })\n    }\n  }\n}\n```\n\nAlternatively, you can make any non-decorated class reactive on the fly using the static `.create()` method:\n\n```typescript\nimport VueStore from 'vue-class-store'\nimport Store from './Store'\n\nconst store: Store = VueStore.create(new Store({ ... }))\n```\n\n## How it works\n\nThis is probably a good point to stop and explain what is happening under the hood.\n\nImmediately after the class is instantiated, the decorator function extracts the class' properties and methods and rebuilds either a new Vue instance (Vue 2) or a Proxy object (Vue 3).\n\nThis functionally-identical object is then returned, and thanks to TypeScript generics your IDE and the TypeScript compiler will think it's an instance of the *original* class, so code completion will just work.\n\nAdditionally, because all methods have their scope rebound to the original class, breakpoints will stop in the right place, and you can even call the class keyword `super` and it will resolve correctly up the prototype chain.\n\n![devtools](docs/devtools.png)\n\nNote that the object will of course be a `Vue` or `Proxy` instance, so running code like  `store instanceof Store` will return `false` .\n\n## Inheritance\n\nThe decorator supports class inheritance meaning you can do things like this:\n\n```typescript\nclass Rectangle {\n  width = 0\n  height = 0\n  \n  constructor (width, height) {\n    this.width = width\n    this.height = height\n  }\n  \n  get area () { return this.width * this.height }\n}\n\n@VueStore\nclass Square extends Rectangle {\n  constructor (size) {\n    super(size, size)\n  }\n\n  'on:width' (value) { this.height = value }\n  'on:height' (value) { this.width = value }\n}\n```\n\nMake sure you **don't inherit from another decorated class** because the original link to the prototype chain will have been broken by the substituted object returned by the previous decorator:\n\n```typescript\n// don't do this!\n\n@VueStore\nclass Rectangle { ... }\n\n@VueStore\nclass Square extends Rectangle { ... }\n```\n\nIf you need to keep the original Rectangle and Square intact, decorate a final empty class that leaves the original classes untouched:\n\n```typescript\n// do this instead...\n\nclass Rectangle { ... }\nclass Square extends Rectangle { ... }\n\n@VueStore\nclass SquareStore extends Square { } \n```\n\nAlternatively, use inline creation:\n\n```typescript\nimport Square from './Square'\n\nconst model: Square = VueStore.create(new Square(10))\n```\n\n## Global / shared state\n\nBecause the class itself is reactive, you could inject it into a component tree, simulating global state:\n\n```javascript\nexport default {\n  provide () {\n    return {\n      $products: new ProductsStore()\n    }\n  },\n}\n```\n\n```javascript\nexport default {\n  inject: [\n    '$products'\n  ],\n  \n  computed: {\n    items () {\n      return this.$products.items\n    }\n  },\n  \n  filterProducts (value) {\n    this.$products.filter = value\n  }\n}\n```\n\n## Development\n\n### Demo\n\nThe library has demos for Vue 2, Vue 3 and Nuxt, and can be found in the following repo:\n\n- https://github.com/davestewart/vue-class-store-demos\n\n### Scripts\n\nThe package uses Yarn, and has only two scripts, to build for development and production:\n\n- `yarn dev` - build and watch for development\n- `yarn build` - build for production\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavestewart%2Fvue-class-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavestewart%2Fvue-class-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavestewart%2Fvue-class-store/lists"}