{"id":13392495,"url":"https://github.com/vuex-orm/plugin-change-flags","last_synced_at":"2025-05-16T04:34:38.743Z","repository":{"id":34079716,"uuid":"162580297","full_name":"vuex-orm/plugin-change-flags","owner":"vuex-orm","description":"Vuex ORM plugin for adding IsDirty / IsNew flags to model entities.","archived":false,"fork":false,"pushed_at":"2022-12-02T19:15:29.000Z","size":1001,"stargazers_count":23,"open_issues_count":18,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T03:33:56.420Z","etag":null,"topics":["vue","vuex","vuex-orm","vuex-orm-plugin","vuex-plugin"],"latest_commit_sha":null,"homepage":"","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/vuex-orm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-20T13:01:42.000Z","updated_at":"2024-10-29T16:06:19.000Z","dependencies_parsed_at":"2023-01-15T04:29:20.085Z","dependency_job_id":null,"html_url":"https://github.com/vuex-orm/plugin-change-flags","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuex-orm%2Fplugin-change-flags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuex-orm%2Fplugin-change-flags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuex-orm%2Fplugin-change-flags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuex-orm%2Fplugin-change-flags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuex-orm","download_url":"https://codeload.github.com/vuex-orm/plugin-change-flags/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254470308,"owners_count":22076566,"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":["vue","vuex","vuex-orm","vuex-orm-plugin","vuex-plugin"],"created_at":"2024-07-30T17:00:23.685Z","updated_at":"2025-05-16T04:34:33.720Z","avatar_url":"https://github.com/vuex-orm.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"192\" src=\"https://github.com/vuex-orm/vuex-orm/blob/master/logo-vuex-orm.png\" alt=\"Vuex ORM\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eVuex ORM IsDirty / IsNew plugin\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003eThis project is supported by \u003ca href=\"https://www.generativeobjects.com/\" target=\"_blank\"\u003eGenerative Objects\u003c/a\u003e\u003c/h3\u003e\n\n[![Build Status](https://travis-ci.org/vuex-orm/plugin-change-flags.svg?branch=master)](https://travis-ci.org/vuex-orm/plugin-change-flags) [![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\nThis is a plugin for the [Vuex-ORM](https://github.com/vuex-orm/vuex-orm) library.\nIt adds two flags `$isDirty` and `$isNew` (as _boolean_ attributes) on any instance of the entities created through this library and updates their values automatically.\n\n## Installation\n\nSimply run `npm install @vuex-orm/plugin-change-flags --save` in your favorite terminal.\n\nThen, you need to install the plugin as any VuexORM plugin. In your store initialization code, simply add:\n\n```javascript\nimport VuexORMisDirtyPlugin from '@vuex-orm/plugin-change-flags';\n```\n\nand then\n\n```javascript\nVuexORM.use(VuexORMisDirtyPlugin);\n```\n\n## Usage\n\nOnce the plugin installed, every time you create a new instance of an entity, the `$isDirty` and `$isNew` will be automatically added.\n\nThe default value for those flags is `false`. They are _automatically_ set to `true` in the following cases:\n\n### \\$isDirty\n\nThis flag is _automatically_ set to `true` when:\n\n-   creating a new instance using the `createNew` method;\n-   updating the entity instance in the store, using the `update` action (`insert` and `create` mutation will not set this flag to `true`).\n\n**Preventing flag setting**\nIf you want to prevent the flag to be set to `true` when updating, you can pass `preventDirtyFlag: true` to the `update` and `insertOrUpdate` calls:\n\n```js\nUser.update({\n    data: myUserToUpdate,\n    preventDirtyFlag: true\n});\n```\n\n### \\$isNew\n\nThis flag is _automatically_ set to `true` when calling the `createNew` method.\n\n### Hydrating with other default values\n\nWhen calling the Model constructor `new Model()`, the default values for both flags is `false`.  \nOther values can be set by passing the initial record value to the constructor:\n\n```javascript\nlet user = new User({ id: 1, $isNew: true });\n\nconsole.log(user.$isNew); // true (set through parameter)\nconsole.log(user.$isDirty); // false (default value)\n```\n\n## Methods\n\nThis plugin also adds the `Model.createNew` method and the `allDirty` \u0026 `allNew` getters.\n\n### `createNew` factory method\n\nThe 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.\n\nThis 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.\n\nIf you don't want the created instance to be inserted in store directly, you can pass `false` as parameter.\n\n: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.\n\n### `allDirty` getter\n\nThis new getter returns all entities marked as dirty currently in the store.\n\nIt can be used globally:\n\n```javascript\n// Returns an array of mixed types with all entities\n// currently marked as dirty in the store\nlet results = store.getters['entities/allDirty']();\n```\n\nor specifically to a type:\n\n```javascript\n// Returns an array User entities currently marked as dirty in the store\nlet results = store.getters['entities/users/allDirty']();\n```\n\n### `allNew` getter\n\nThis new getter returns all entities marked as new currently in the store.\n\nIt can be used globally:\n\n```javascript\n// Returns an array of mixed types with all entities\n// currently marked as new in the store\nlet results = store.getters['entities/allNew']();\n```\n\nor specifically to a type:\n\n```javascript\n// Returns an array User entities currently marked as new in the store\nlet results = store.getters['entities/users/allNew']();\n```\n\n### `resetAllDirtyFlags` action\n\nThis action will run through all the entities marked as dirty in your store and set the corresponding flag to `false`:\n\n```js\nstore.dispatch['entities/resetAllDirtyFlags']({}, { root: true });\n```\n\n## Plugin Options\n\nBy default, the flags are named `$isDirty` and `$isNew`.  \nYou can override those default by setting the corresponding options at plugin initialization.\n\n| Option name           | Description                                                         | Default value |\n| --------------------- | ------------------------------------------------------------------- | :-----------: |\n| isNewFlagName         | Sets the name of the _isNew_ flag                                   |   `$isNew`    |\n| isDirtyFlagName       | Sets the name of the _isDirty_ flag                                 |  `$isDirty`   |\n| exposeFlagsExternally | Adds the _isNew_ and _isDirty_ flags to the JSON stringified output |    `true`     |\n\nIn order to use those options, you can pass them as the second parameter of the `install` call:\n\n```javascript\nVuexORM.use(VuexORMisDirtyPlugin, {\n    isNewFlagName: 'IsNew',\n    isDirtyFlagName: 'IsDirty',\n    exposeFlagsExternally: true\n});\n```\n\n## License\n\n[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuex-orm%2Fplugin-change-flags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuex-orm%2Fplugin-change-flags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuex-orm%2Fplugin-change-flags/lists"}