{"id":16365246,"url":"https://github.com/xiaoluoboding/vuex-stateshot","last_synced_at":"2025-03-23T02:32:12.890Z","repository":{"id":83484458,"uuid":"227563858","full_name":"xiaoluoboding/vuex-stateshot","owner":"xiaoluoboding","description":"💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.","archived":false,"fork":false,"pushed_at":"2020-11-28T10:04:35.000Z","size":439,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-02T05:52:24.797Z","etag":null,"topics":["history-management","snapshot","state-management","undo-redo","vue","vuex-plugin","vuex3"],"latest_commit_sha":null,"homepage":"https://xiaoluoboding.github.io/vuex-stateshot/","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/xiaoluoboding.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-12-12T09:04:13.000Z","updated_at":"2022-09-27T06:42:10.000Z","dependencies_parsed_at":"2024-01-08T08:57:30.906Z","dependency_job_id":null,"html_url":"https://github.com/xiaoluoboding/vuex-stateshot","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvuex-stateshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvuex-stateshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvuex-stateshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvuex-stateshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoluoboding","download_url":"https://codeload.github.com/xiaoluoboding/vuex-stateshot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245047979,"owners_count":20552430,"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":["history-management","snapshot","state-management","undo-redo","vue","vuex-plugin","vuex3"],"created_at":"2024-10-11T02:43:08.701Z","updated_at":"2025-03-23T02:32:12.546Z","avatar_url":"https://github.com/xiaoluoboding.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","Utilities [🔝](#readme)"],"sub_categories":["Utilities"],"readme":"# Vuex Stateshot\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://travis-ci.org/xiaoluoboding/vuex-stateshot\"\u003e\u003cimg src=\"https://travis-ci.org/xiaoluoboding/vuex-stateshot.svg?branch=master\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vuex-stateshot\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vuex-stateshot.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/xiaoluoboding/vuex-stateshot\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/xiaoluoboding/vuex-stateshot.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/xiaoluoboding/vuex-stateshot\"\u003e\u003cimg src=\"https://img.shields.io/github/license/xiaoluoboding/vuex-stateshot.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.\n\n## Installation\n\n```bash\nnpm i vuex-stateshot -S\nor\nyarn add vuex-stateshot -S\n```\n\n## Demo\n\nSee `/app` works at [Code Sandbox](https://codesandbox.io/s/vuex-stateshot-szx9h)\n\n## Concepts\n\n\u003e The core concepts is base on StateShot.js and Vuex3.1+ API `subscribe` \u0026 `subscribeAction`\n\n## Usage\n\n\u003e The Vuex Stateshot is base on [StateShot](https://github.com/gaoding-inc/stateshot), you can know about `StateShot` first, maybe you already use in your project.\n\n\n### Create the plugin\n\nAdd the plugin to the Vuex **store**:\n\n```javascript\nimport { createPlugin } from 'vuex-stateshot'\n\nconst store = new Vuex.Store({\n  state: {},\n  ...,\n  plugins: [\n    createPlugin({\n      // The special root module key\n      rootModule: {\n        // The actions you want snapshot\n        actions: [],\n        // The mutations you want snapshot\n        mutations: []\n      },\n      // The custom module name\n      __MODULE__NAME__: {\n        // The actions you want snapshot\n        actions: [],\n        // The mutations you want snapshot\n        mutations: []\n      }\n    })\n  ]\n})\n```\n\n### Work with component\n\nIn *component*, use `createNamespacedHelper` to map the helpers:\n\n```javascript\nimport { createNamespacedHelpers } from 'vuex'\n\nconst { mapGetters, mapActions } = createNamespacedHelpers('vuexstateshot')\n\nexport default {\n  ...,\n\n  computed: {\n    ...mapGetters([ 'undoCount', 'redoCount', 'hasUndo', 'hasRedo' ])\n  },\n\n  methods: {\n    ...mapActions(['undo', 'redo', 'reset'])\n  }\n}\n```\n\nOr use the module namespace (`vuexstateshot`) as the first argument to map helpers\n\n```javascript\nimport { mapGetters, mapActions } from 'vuex'\n\nexport default {\n  ...,\n\n  computed: {\n    ...mapGetters('vuexstateshot', [ 'undoCount', 'redoCount', 'hasUndo', 'hasRedo' ])\n  },\n\n  methods: {\n    ...mapActions('vuexstateshot', ['undo', 'redo', 'reset'])\n  }\n}\n```\n\n## API\n\n### Plugin Options\n\n| Name | Description | Type |\n|:--------|:--------|:--------:|\n| first argument | Provide the relation statement of module namespace and the actions/mutations you want snapshot | Object |\n| second argument | The options of stateshot [history](https://github.com/gaoding-inc/stateshot#history) instance. | Object |\n\n**The is a example**\n\n```js\nplugins: [\n  createPlugin(\n    // first argument\n    {\n      // The special root module key\n      rootModule: {\n        // The actions you want snapshot\n        actions: ['setTheme']\n      },\n      // The custom module name\n      global: {\n        // The actions you want snapshot\n        actions: ['syncState', 'setLayout'],\n        // The mutations you want snapshot\n        mutations: ['CHANGE_COLOR']\n      },\n      // The nested custom module name\n      'global/widget': {\n        actions: ['toggleShowCard']\n      }\n    },\n    // second argument optionally\n    {\n      maxLength: 20\n    }\n  )\n]\n```\n\n**history Options**\n\n| Name | Description | Type |\n|:--------|:--------|:--------:|\n| maxLength | Max length saving history states, 100 by default. | Number |\n| delay | Debounce time for push in milliseconds, 50 by default. | Number |\n\n### Plugin Methods\n\n\u003e Vuex Stateshot also provide a custom method to record the state into history\n\n```javascript\nthis.$stateshot.syncState()\n```\n\n| Name | Description | Callback |\n|:--------|:--------|:--------:|\n| syncState | Custom to record the state, not by subscribe the `action/mutation` | - |\n| getHistoryLength | Get the current state history length | - |\n| unsubscribeAction | When you want stop subscribe `Action` programly | - |\n| subscribeAction | Used when you want resubscribe `Action` after call `unsubscribeAction` | - |\n| unsubscribe | When you want stop subscribe `Mutations` programly | - |\n| subscribe | Used when you want resubscribe `Mutations` after call `unsubscribe` | - |\n\n### Namespaced Helpers\n\n**mapGetters**\n\n\u003e When plugin first time sync the base state, the undoCount = 1, and hasUndo = true;\n\u003e It's all begin;\n\u003e When you call the undo method, you have the state can redo\n\n| Name | Description | Type |\n|:--------|:--------|:--------:|\n| undoCount | The counts of the current state has undo. | Number |\n| redoCount | The counts of the current state has redo. | Number |\n| hasUndo | Whether current state has undo records before. | Boolean |\n| hasRedo | Whether current state has redo records after undo. | Boolean |\n\n**mapActions**\n\n| Name | Description | Callback |\n|:--------|:--------|:--------:|\n| undo | Undo a record if possible. | `() =\u003e prevState` |\n| redo | Redo a record if possible. Must after call the `undo` action | `() =\u003e nextState` |\n| reset | Clear all the state to the origin | - |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvuex-stateshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoluoboding%2Fvuex-stateshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvuex-stateshot/lists"}