{"id":13511370,"url":"https://github.com/mdartic/vue-reactive-store","last_synced_at":"2025-03-30T20:33:10.571Z","repository":{"id":34861291,"uuid":"185212527","full_name":"mdartic/vue-reactive-store","owner":"mdartic","description":"A VueX alternative : declarative + reactive + centralized way to structure your data store. Inspired by VueX and Vue.js . Compatible with vue-devtools.","archived":false,"fork":false,"pushed_at":"2020-06-02T06:55:13.000Z","size":1121,"stargazers_count":28,"open_issues_count":12,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-02T03:07:56.545Z","etag":null,"topics":["state","state-management","store","vue","vuejs","vuex"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/mdartic.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":"2019-05-06T14:25:13.000Z","updated_at":"2023-04-24T01:16:11.000Z","dependencies_parsed_at":"2022-07-22T05:48:27.856Z","dependency_job_id":null,"html_url":"https://github.com/mdartic/vue-reactive-store","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/mdartic%2Fvue-reactive-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdartic%2Fvue-reactive-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdartic%2Fvue-reactive-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdartic%2Fvue-reactive-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdartic","download_url":"https://codeload.github.com/mdartic/vue-reactive-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222581265,"owners_count":17006322,"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":["state","state-management","store","vue","vuejs","vuex"],"created_at":"2024-08-01T03:00:48.516Z","updated_at":"2024-11-01T13:30:56.168Z","avatar_url":"https://github.com/mdartic.png","language":"TypeScript","funding_links":[],"categories":["vue"],"sub_categories":[],"readme":"## vue-reactive-store\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/mdartic/vue-reactive-store.svg)](https://greenkeeper.io/)\n![](https://gitlab.com/mad-z/vue-reactive-store-ci-cd/badges/master/pipeline.svg)\n![](https://gitlab.com/mad-z/vue-reactive-store-ci-cd/badges/master/coverage.svg)\n\n*Vue.js* (only) library for **managing a centralized state**, inspired by Vue.js and VueX.\n\nWithout `mutations`, and with async `actions` mutating directly the state.\n\nWe could talk about `mutactions`.\n\nCompatible with [`vue-devtools`](https://github.com/vuejs/vue-devtools/) by using a plugin.\n\nThis library is in a WIP state.\n\nYou can create issues to ask for some features, or if you find bugs.\n\nIf feedbacks are goods, I'll write a better documentation :-)\nwith english examples and take care of this library.\n\n### Core concepts\n\n`vue-reactive-store` is a library trying to make easier\nthe centralization of your app's data.\n\nA store is composed of :\n* a **name**\n* a **state**, that will evolve in time (think the `data` of a Vue.js instance)\n* **computed** properties based on this state (think the `computed` of a Vue.js instance, or the `getters` for VueX)\n* **actions** that will make API calls, mutate the state, ... (think `actions` for VueX, but with `mutations` inside)\n* **watch(ers)** that could react to state / computed evolutions (same as `watch` for Vue.js instance)\n* **plugins**, trigerred for state evolution, computed properties, actions / watchers trigerred\n* **modules**, aka sub-stores, namespaced\n* ***props***, like Vue.js instances, but, just an idea for the moment\n\n### Why creating an alternative ?\n\nI think we can do a store simpler than VueX.\n\nWith VS Code and Intellisense, I would like my IDE\ntell me what's in my store, instead of calling dispatch functions\nor mapGetters / mapState functions.\n\nWe could trigger actions by importing them directly where we want to use them.\nNot by dispatching an action with a string composed by his namespace / function name.\n\nAnd I think we can do better with TypeScript, to help us with typings.\n\nFor the moment, autocompletion is not as good as I want. I'm working on it.\n\n### How to use it\n\nI hope the use of TypeScript will benefit for better understanding.\n\nFirst, install `vue-reactive-store` in your Vue.js app.\n\n```\nnpm i vue-reactive-store\n```\n\nAdd a store as a JS object, and transform it by creating\na `VueReactiveStore` instance.\n\n```js\n// src/store.js\nimport VueReactiveStore from 'vue-reactive-store'\n\nconst store = {\n  state: {\n    loading: false,\n    error: null,\n    data: null\n  },\n  computed: {\n    myCurrentState() {\n      if (store.state.loading === true) return 'is loading...'\n      if (store.state.error) return 'error...'\n      return 'store seems ok'\n    }\n  },\n  actions: {\n    async fetchData() {\n      store.state.loading = true\n      try {\n        // make api call\n        const response = await myApi.fetchSomeData()\n        store.state.data = response\n      } catch (e) {\n        store.state.error = e\n      }\n      store.state.loading = false\n    }\n  },\n  plugins: [{\n    actions: {\n      after(storeName, actionName, storeState) {\n        console.log('action is finished, this is my store : ', storeState)\n      }\n    }\n  }]\n}\n\nconst reactiveStore = new VueReactiveStore(store)\n\nexport default reactiveStore\n```\n\nFinally, use it in your components by importing the store,\nand put the data that interest you in the `data` and `computed`\npart of your app.\n\n```vue\n// src/components/myComponent.js\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    {{ myCurrentState }}\n    \u003cdiv v-if=\"!state.loading\"\u003e\n      Data : {{ state.data }}\n    \u003c/div\u003e\n    \u003cdiv v-if=\"state.error\"\u003e\n      {{ state.error }}\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport store from '../store'\n\nexport default {\n  data: {\n    state: store.state\n  },\n  computed: store.computed,\n  created() {\n    store.actions.fetchData()\n  }\n}\n\u003c/script\u003e\n```\n\nThat sould do the trick, now your store is reactive,\nand you could use it in all the component you want by importing\nthis object.\nBut, don't import it everywhere, just use it in your 'top-level'\ncomponents to facilitate your project maintenability...\n\n**IMPORTANT !**\nTo use the data, you'll have to wire the `state` property of the `store`.\nIf you wire `store.state.data`, you'll get `null` and your `data` property isn't reactive yet.\n\n```\nimport store from '../store'\n\nexport default {\n  data: {\n    data: store.state.data, // here, you'll always get 'null'\n    state: store.state // here, state is reactive, and so all children, like data\n  },\n  …\n}\n```\n\nFor computed properties or actions, it'll be fine.\nYou can wire directly the computed property or the action.\n\n### Logger plugin\n\nThere is a logger plugin that logs \n* each action trigerred (before / after)\n* each mutation on the state (after)\n* each computed property recomputed (after)\n\nTo use it, you can do like this :\n\n```js\n// src/store.js\nimport VueReactiveStore from 'vue-reactive-store'\nimport VRSPluginLogger from 'vue-reactive-store/dist/index.esm'\n\nconst store = {\n  state: {\n    loading: false,\n    error: null,\n    data: null\n  },\n  computed: {\n    myCurrentState() {\n      if (store.state.loading === true) return 'is loading...'\n      if (store.state.error) return 'error...'\n      return 'store seems ok'\n    }\n  },\n  actions: {\n    async fetchData() {\n      store.state.loading = true\n      try {\n        // make api call\n        const response = await myApi.fetchSomeData()\n        store.state.data = response\n      } catch (e) {\n        store.state.error = e\n      }\n      store.state.loading = false\n    }\n  }\n}\n\nVueReactiveStore.registerPlugin(VRSPluginLogger);\n\nconst reactiveStore = new VueReactiveStore(store)\n\n// this call will fetch data\n// and the VRSPluginLogger will log\n// * the action trigerred (before)\n// * the state mutations (after)\n// * the computed properties (after)\n// * the end of the action (after)\nstore.actions.fetchData()\n\nexport default store\n```\n\nYou can also decide to just log action / state / computed without previous/next state.\n\n```js\n// by default all are true and so are verbose logs\nVRSPluginLogger.logSettings.actions = false;\nVRSPluginLogger.logSettings.computed = false;\nVRSPluginLogger.logSettings.state = false;\n```\n\n### Devtools plugin\n\nLike VueX, you can debug your store with [vue-devtools](https://github.com/vuejs/vue-devtools/).\n\nIt's not enabled 'by default', and you have to explicitly add the devtools plugin like that :\n\n```javascript\nimport VueReactiveStore from 'vue-reactive-store'\nimport VRSPluginDevtools from 'vue-reactive-store/dist/devtools.esm'\n\nconst store = {\n  state: {\n    loading: false,\n    error: null,\n    results: null\n  },\n  actions: {\n    async fetchData () {\n      store.state.loading = true\n      try {\n        // blablabla\n        store.state.results = 'pwet'\n      } catch (e) {\n        store.state.error = e\n      }\n      store.state.loading = false\n    }\n  },\n  plugins: [\n    VRSPluginDevtools\n  ]\n}\n\nnew VueReactiveStore(store)\n\nexport default store\n```\n\nThen you could observe there is a store detected in the VueX tab of vue-devtools.\n\n**Time Travel** is normally ok, but maybe there are some lacks for **Commit mutations**.\n\nSubmit an issue if you find bugs.\n\n### Next episodes\n\n* finishing blog articles (FR)\n* release a plugin for storing data in localStorage\n* release a plugin for history (undo / redo)\n* listen to community needs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdartic%2Fvue-reactive-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdartic%2Fvue-reactive-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdartic%2Fvue-reactive-store/lists"}