{"id":19324814,"url":"https://github.com/spatie/vue-save-state","last_synced_at":"2025-04-05T04:12:54.030Z","repository":{"id":57124633,"uuid":"72208136","full_name":"spatie/vue-save-state","owner":"spatie","description":"A Vue mixin to save the state of a component to local storage","archived":false,"fork":false,"pushed_at":"2022-03-21T12:45:21.000Z","size":50,"stargazers_count":243,"open_issues_count":0,"forks_count":22,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-29T12:03:55.558Z","etag":null,"topics":["javascript","localstorage","state-machine","vue"],"latest_commit_sha":null,"homepage":"https://spatie.be/opensource","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/spatie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-28T13:06:41.000Z","updated_at":"2024-11-25T14:26:58.000Z","dependencies_parsed_at":"2022-08-31T08:11:34.036Z","dependency_job_id":null,"html_url":"https://github.com/spatie/vue-save-state","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fvue-save-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fvue-save-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fvue-save-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fvue-save-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spatie","download_url":"https://codeload.github.com/spatie/vue-save-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284951,"owners_count":20913704,"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":["javascript","localstorage","state-machine","vue"],"created_at":"2024-11-10T02:06:52.271Z","updated_at":"2025-04-05T04:12:54.007Z","avatar_url":"https://github.com/spatie.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/support-ukraine.svg?t=1\" /\u003e](https://supportukrainenow.org)\n\n# A Vue mixin to save the state of a component to local storage\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/vue-save-state.svg?style=flat-square)](https://npmjs.com/package/vue-save-state)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)\n[![Build Status](https://img.shields.io/travis/spatie/vue-save-state/master.svg?style=flat-square)](https://travis-ci.org/spatie/vue-save-state)\n[![npm](https://img.shields.io/npm/dt/vue-save-state.svg?style=flat-square)](https://npmjs.com/package/vue-save-state)\n\nThis package provides a `SaveState` mixin that automatically saves any change in the state of your component to localStorage. The next time that component gets initialized it will restore its state from the saved values in local storage.\n\nSpatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).\n\n## Support us\n\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/vue-save-state.jpg?t=1\" width=\"419px\" /\u003e](https://spatie.be/github-ad-click/vue-save-state)\n\nWe invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).\n\nWe highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).\n\n## Postcardware\n\nYou're free to use this package (it's [MIT-licensed](LICENSE.md)), but if it makes it to your production environment we highly apprecatie you sending us a postcard from your hometown, mentioning which of our package(s) you are using.\n\nOur address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.\n\nAll postcards are published [on our website](https://spatie.be/en/opensource/postcards).\n\n## Install\n\nYou can install the package via yarn:\n\n```bash\nyarn add vue-save-state\n```\n\nor npm\n\n```bash\nnpm install vue-save-state\n```\n\n## Usage\n\nIn order to save the state of your component you'll need to add the `SaveState` mixin:\n\n```js\nimport saveState from 'vue-save-state';\n\nexport default {\n\n    mixins: [saveState],\n\n    ...\n}\n```\n\nNext you'll need to add a method called `getSaveStateConfig`:\n\n```js\nimport saveState from 'vue-save-state';\n\nexport default {\n\n    mixins: [saveState],\n    \n    // ...\n\n    methods: {\n\n        getSaveStateConfig() {\n            return {\n                'cacheKey': 'nameOfYourComponent',\n            };\n        },\n    },\n}\n```\n\nWith these steps done any change to the state of your component will get written to local storage. The value given in `cacheKey` determines to which key in local storage the state of this component will get written. When the component is created it'll restore its state from local storage.\n\n## Only save certain properties of the state\n\nThere's also a configuration option to determine which properties of the state should be saved/restored:\n\n```js\nimport saveState from 'vue-save-state';\n\nexport default {\n    \n    // ...\n\n    methods: {\n\n        getSaveStateConfig() {\n            return {\n                'cacheKey': 'nameOfYourComponent',\n                'saveProperties': ['title', 'text'],\n            };\n        },\n    },\n}\n```\nWith this configuration only the `title` and `text` properties of your state will get saved/restored.\n\nAlternatively you could specify which fields to ignore:\n\n```js\nimport saveState from 'vue-save-state';\n\nexport default {\n\n    // ...\n\n    methods: {\n\n        getSaveStateConfig() {\n            return {\n                'cacheKey': 'nameOfYourComponent',\n                'ignoreProperties': ['title'],\n            };\n        },\n    },\n}\n```\n\nIn this scenario all fields except for the `title` property in your state will get saved/restored.\n\n## Transforming the state on load\n\nIf you want to transform the values stored in local storage before loading the into the state of the component add an `onLoad` function to the object return by `getSaveStateConfig`.\n\n```js\nimport saveState from 'vue-save-state';\n\nexport default {\n\n    // ...\n\n    methods: {\n\n        getSaveStateConfig() {\n            return {\n                'onLoad': (key, value) =\u003e {\n                    //return a new value\n                },\n            };\n        },\n    },\n}\n```\n\n## Change log\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Testing\n\n``` bash\n$ npm run test\n```\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.\n\n## Security\n\nIf you discover any security related issues, please contact [Freek Van der Herten](https://github.com/freekmurze) instead of using the issue tracker.\n\n## Credits\n\n- [Freek Van der Herten](https://github.com/freekmurze)\n- [All Contributors](../../contributors)\n\n## About Spatie\nSpatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Fvue-save-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspatie%2Fvue-save-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Fvue-save-state/lists"}