|
| 1 | +# Vuex ORM IsDirty / IsNew plugin |
| 2 | + |
| 3 | +[](http://badges.mit-license.org) |
| 4 | + |
| 5 | +This is a plugin for the [Vuex-ORM](https://github.com/vuex-orm/vuex-orm) library. |
| 6 | +It adds two flags `$isDirty` and `$isNew` (as _boolean_ attributes) on any instance of the entities created through this library and updates their values automatically. |
| 7 | + |
| 8 | +## Installation |
| 9 | + |
| 10 | +Simply reference the github project in your `package.json` |
| 11 | + |
| 12 | +```javascript |
| 13 | +dependencies: { |
| 14 | + ... |
| 15 | + "vuexorm-isdirty-plugin": "git://github.com/tvillaren/vuexorm-isdirty-plugin" |
| 16 | + ... |
| 17 | +} |
| 18 | +``` |
| 19 | + |
| 20 | +and run `npm install`. |
| 21 | + |
| 22 | +Then, you need to install the plugin as any VuexORM plugin. In your store initialization code, simply add: |
| 23 | + |
| 24 | +```javascript |
| 25 | +import VuexORMisDirtyPlugin from 'vuexorm-isdirty-plugin'; |
| 26 | +``` |
| 27 | + |
| 28 | +and then |
| 29 | + |
| 30 | +```javascript |
| 31 | +VuexORM.use(VuexORMisDirtyPlugin); |
| 32 | +``` |
| 33 | + |
| 34 | +## Usage |
| 35 | + |
| 36 | +Once the plugin installed, every time you create a new instance of an entity, the `$isDirty` and `$isNew` will be automatically added. |
| 37 | + |
| 38 | +The default value for those flags is `false`. They are _automatically_ set to `true` in the following cases: |
| 39 | + |
| 40 | +### \$isDirty |
| 41 | + |
| 42 | +This flag is _automatically_ set to `true` when: |
| 43 | + |
| 44 | +- creating a new instance using the `createNew` method; |
| 45 | +- updating the entity instance in the store, using the `update` action (`insert` and `create` mutation will not set this flag to `true`). |
| 46 | + |
| 47 | +### \$isNew |
| 48 | + |
| 49 | +This flag is _automatically_ set to `true` when calling the `createNew` method. |
| 50 | + |
| 51 | +### Hydrating with other default values |
| 52 | + |
| 53 | +When calling the Model constructor `new Model()`, the default values for both flags is `false`. |
| 54 | +Other values can be set by passing the initial record value to the constructor: |
| 55 | + |
| 56 | +```javascript |
| 57 | +let user = new User({ id: 1, $isNew: true }); |
| 58 | + |
| 59 | +console.log(user.$isNew); // true (set through parameter) |
| 60 | +console.log(user.$isDirty); // false (default value) |
| 61 | +``` |
| 62 | + |
| 63 | +## Methods |
| 64 | + |
| 65 | +This plugin also adds the `Model.createNew` method and the `allDirty` & `allNew` getters. |
| 66 | + |
| 67 | +### `createNew` factory method |
| 68 | + |
| 69 | +The plugin provides a new `Model.createNew(insertInStore = true)` method which returns a new instance of the entity, with both flags set to `true` by default and all other fields set to their default value. |
| 70 | + |
| 71 | +This method copies VuexORM [new](https://vuex-orm.github.io/vuex-orm/guide/store/inserting-and-updating-data.html#inserts) method behavior. As such, it will automatically insert the newly created entity in the store. |
| 72 | + |
| 73 | +If you don't want the created instance to be inserted in store directly, you can pass `false` as parameter. |
| 74 | + |
| 75 | +:warning: When calling the `createNew` method without parameter, this will try to insert the given record directly in the store. It might fail if default value for the Primary Key is `null`. Try using an [increment type attribute](https://vuex-orm.github.io/vuex-orm/guide/components/models.html#auto-increment-type) or a [mutator](https://vuex-orm.github.io/vuex-orm/guide/advanced/accessors-and-mutators.html#defining-mutators) to make sure your PK as a value. |
| 76 | + |
| 77 | +### `allDirty` getter |
| 78 | + |
| 79 | +This new getter returns all entities marked as dirty currently in the store. |
| 80 | + |
| 81 | +It can be used globally: |
| 82 | + |
| 83 | +```javascript |
| 84 | +// Returns an array of mixed types with all entities |
| 85 | +// currently marked as dirty in the store |
| 86 | +let results = store.getters['entities/allDirty'](); |
| 87 | +``` |
| 88 | + |
| 89 | +or specifically to a type: |
| 90 | + |
| 91 | +```javascript |
| 92 | +// Returns an array User entities currently marked as dirty in the store |
| 93 | +let results = store.getters['entities/users/allDirty'](); |
| 94 | +``` |
| 95 | + |
| 96 | +### `allNew` getter |
| 97 | + |
| 98 | +This new getter returns all entities marked as new currently in the store. |
| 99 | + |
| 100 | +It can be used globally: |
| 101 | + |
| 102 | +```javascript |
| 103 | +// Returns an array of mixed types with all entities |
| 104 | +// currently marked as new in the store |
| 105 | +let results = store.getters['entities/allNew'](); |
| 106 | +``` |
| 107 | + |
| 108 | +or specifically to a type: |
| 109 | + |
| 110 | +```javascript |
| 111 | +// Returns an array User entities currently marked as new in the store |
| 112 | +let results = store.getters['entities/users/allNew'](); |
| 113 | +``` |
| 114 | + |
| 115 | +## Plugin Options |
| 116 | + |
| 117 | +By default, the flags are named `$isDirty` and `$isNew`. |
| 118 | +You can override those default by setting the corresponding options at plugin initialization. |
| 119 | + |
| 120 | +| Option name | Description | Default value | |
| 121 | +| --------------- | ----------------------------------- | :-----------: | |
| 122 | +| isNewFlagName | Sets the name of the _isNew_ flag | `$isNew` | |
| 123 | +| isDirtyFlagName | Sets the name of the _isDirty_ flag | `$isDirty` | |
| 124 | + |
| 125 | +In order to use those options, you can pass them as the second parameter of the `install` call: |
| 126 | + |
| 127 | +```javascript |
| 128 | +VuexORM.use(VuexORMisDirtyPlugin, { |
| 129 | + isNewFlagName: 'IsNew', |
| 130 | + isDirtyFlagName: 'IsDirty' |
| 131 | +}); |
| 132 | +``` |
| 133 | + |
| 134 | +## License |
| 135 | + |
| 136 | +[](http://badges.mit-license.org) |
| 137 | + |
| 138 | +This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details |
0 commit comments