Skip to content

Commit 4f65829

Browse files
author
tvillaren
committed
README Update
1 parent 88fbd9e commit 4f65829

File tree

1 file changed

+138
-0
lines changed

1 file changed

+138
-0
lines changed

README.md

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
# Vuex ORM IsDirty / IsNew plugin
2+
3+
[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](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+
[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](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

Comments
 (0)