├── .gitignore ├── README.md ├── dev ├── index.js ├── package.json └── yarn.lock ├── docs └── logo.png ├── nuxt ├── README.md ├── assets │ └── styles │ │ ├── index.css │ │ ├── normalize.css │ │ └── skeleton.css ├── components │ ├── Item.vue │ └── Rectangle.vue ├── layouts │ └── default.vue ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages │ ├── caveats │ │ └── random.vue │ ├── examples │ │ ├── basic.vue │ │ ├── global.vue │ │ ├── inherit.vue │ │ └── inline.vue │ ├── index.js │ └── index.vue ├── store │ ├── Item.ts │ ├── Rectangle.ts │ └── Square.ts └── tsconfig.json ├── package-lock.json ├── package.json ├── vue-2 ├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── components │ │ ├── App.vue │ │ ├── CodeView.vue │ │ ├── Home.vue │ │ └── RectangleView.vue │ ├── examples │ │ ├── class-store │ │ │ ├── basic │ │ │ │ ├── Rectangle.ts │ │ │ │ ├── RectangleStore.ts │ │ │ │ └── index.vue │ │ │ ├── global │ │ │ │ ├── Item.vue │ │ │ │ ├── ItemsStore.ts │ │ │ │ ├── index.vue │ │ │ │ └── store.d.ts │ │ │ ├── inherit │ │ │ │ ├── Square.ts │ │ │ │ ├── SquareStore.ts │ │ │ │ └── index.vue │ │ │ └── inline │ │ │ │ └── index.vue │ │ ├── index.js │ │ └── other │ │ │ ├── vue-component │ │ │ └── index.vue │ │ │ ├── vue-model │ │ │ ├── Rectangle.js │ │ │ ├── RectangleService.js │ │ │ └── index.vue │ │ │ └── vuex │ │ │ ├── index.vue │ │ │ └── store │ │ │ ├── index.ts │ │ │ └── modules │ │ │ └── rectangle.ts │ ├── main.ts │ ├── router │ │ └── index.ts │ ├── shims-vue.d.ts │ └── styles │ │ ├── index.css │ │ ├── normalize.css │ │ └── skeleton.css ├── tsconfig.json ├── vue.config.js └── yarn.lock └── vue-3 ├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── components │ ├── App.vue │ ├── CodeView.vue │ ├── Home.vue │ └── RectangleView.vue ├── examples │ ├── class-store │ │ ├── basic │ │ │ ├── Rectangle.ts │ │ │ └── index.vue │ │ ├── global │ │ │ ├── Item.vue │ │ │ ├── ItemsStore.ts │ │ │ └── index.vue │ │ ├── inherit │ │ │ ├── Square.ts │ │ │ └── index.vue │ │ └── inline │ │ │ └── index.vue │ ├── index.js │ └── vue │ │ ├── reactive-helper │ │ ├── factory.ts │ │ └── index.vue │ │ ├── reactive-model │ │ ├── factory.ts │ │ └── index.vue │ │ └── setup-function │ │ └── index.vue ├── main.ts ├── router │ └── index.ts ├── shims-vue.d.ts └── styles │ ├── index.css │ ├── normalize.css │ └── skeleton.css ├── tsconfig.json ├── vue.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Vue Class Store - Demos 2 | 3 | > Vue Class Store demos for Vue 2, Vue 3 and Nuxt 4 | 5 |
6 |
7 |
{{ name }}, area:
4 | $emit('update:width', Number(e.target.value))"> 5 | $emit('update:height', Number(e.target.value))"> 6 | 7 |{{ logs.join('\n') }}8 |
Use client-only
for stores that generate randomised data
Refresh the page to see the first value change on load
7 |Simple and intuitive reactive, computed, and watched properties, within a single, reusable, extensible model
5 |Independent global and local data working together, with no special setup
5 |Managing {{ model.items.length }} items ( {{ model.numSelected }} selected )
7 | 8 | 9 |One class extends another's reactive, computed and watched properties, adding and modifying some of its own
5 |Convert any class into a reactive, computed store in one line
5 |{{ group.title }}
8 |{{ folder.title }}
6 |{{ name }}, area:
4 | $emit('update:width', Number(e.target.value))"> 5 | $emit('update:height', Number(e.target.value))"> 6 | 7 |{{ logs.join('\n') }}8 |
Simple and intuitive reactive, computed, and watched properties, within a single, reusable, extensible model
4 |Independent global and local data working together, with no special setup
4 |Managing {{ model.items.length }} items ( {{ model.numSelected }} selected )
11 | 12 | 13 |One class extends another's reactive, computed and watched properties, adding and modifying some of its own
4 |Convert any class into a reactive, computed store in one line
4 |All logic and data needs to be baked into the visual component itself
4 |Logic and data moved into a factory, but that logic still requires a non standard format
4 |Verbose, proprietary, and often tricky model and accessor formats required to do even simple updates
4 |{{ folder.title }}
6 |{{ name }}, area:
4 | $emit('update:width', Number(e.target.value))"> 5 | $emit('update:height', Number(e.target.value))"> 6 | 7 |{{ logs.join('\n') }}8 |
Simple and intuitive reactive, computed, and watched properties, within a single, reusable, extensible model
4 |Independent global and local data working together, with no special setup
4 |Managing {{ model.items.length }} items ( {{ model.numSelected }} selected )
11 | 12 | 13 |One class extends another's reactive, computed and watched properties, adding and modifying some of its own
4 |Convert any class into a reactive, computed store in one line
4 |Logic and data declared using factory function + reactive helper to return standalone model
4 |Logic and data declared using factory function to return standalone model
4 |Logic and data split between setup function and component methods
4 |