{"id":18817875,"url":"https://github.com/vitorluizc/vuex-handler","last_synced_at":"2025-04-13T23:25:12.986Z","repository":{"id":89819245,"uuid":"105473664","full_name":"VitorLuizC/vuex-handler","owner":"VitorLuizC","description":"Avoid try/catch and .catch() statements and globally handle successful and failed actions.","archived":false,"fork":false,"pushed_at":"2018-02-06T16:40:06.000Z","size":50,"stargazers_count":17,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T06:35:48.030Z","etag":null,"topics":["javascript","vue","vuex","vuex-handler","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/VitorLuizC.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-01T20:52:58.000Z","updated_at":"2024-06-04T21:30:25.000Z","dependencies_parsed_at":"2023-11-13T05:45:15.540Z","dependency_job_id":null,"html_url":"https://github.com/VitorLuizC/vuex-handler","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"808bb04664dd6172d514d54723b381a33ddc4cf7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvuex-handler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvuex-handler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvuex-handler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvuex-handler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VitorLuizC","download_url":"https://codeload.github.com/VitorLuizC/vuex-handler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248795347,"owners_count":21162754,"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","vue","vuex","vuex-handler","vuex-plugin"],"created_at":"2024-11-08T00:13:47.950Z","updated_at":"2025-04-13T23:25:12.976Z","avatar_url":"https://github.com/VitorLuizC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vuex-Handler\n\nAvoid `try/catch` or `.catch(error =\u003e ...)` and globally handle successful and\nfailed actions.\n\n## Install\n\n- Install using `npm` or `yarn`.\n\n  ```sh\n  npm i vuex-handler\n\n  # or using yarn\n  yarn add vuex-handler\n  ```\n\n- Add to Vuex plugins.\n\n  ```js\n  import Vuex from 'vuex'\n  import handler from 'vuex-handler'\n\n  const store = new Vuex.Store({\n    plugins: [ handler ]\n  })\n  ```\n\n## Usage\n\n```js\nconst store = new Vuex.Store({\n  plugins: [ handler ],\n\n  ...,\n\n  actions: {\n    authenticate: async ({ commit }, payload) =\u003e {\n      const { email, password } = payload || {}\n      const { data: token } = await axios.get('/auth', { email, password })\n      return token\n    }\n  }\n}\n\n// This logs all sucessed actions.\nstore.handler.onSuccess = (result, type, params) =\u003e {\n  console.log(result) // 'eyJhb...' 'authenticate' { email: '...', password: '...' }\n  return result\n}\n\n// This logs all failed actions.\nstore.handler.onFailure = (error, type, params) =\u003e {\n  console.log(error) // Error 'authenticate' { email: '...', password: '...' }\n  throw error\n}\n\n// Alerts authenticate errors\n// Don't use alerts, please.\nstore.handler.authenticate.onFailure = (error) =\u003e {\n  alert('Error on authenticate: ' + error.message)\n  return false\n}\n```\n\n## Real world example\n\n```js\n...\n\n// Those handlers are dispatch interceptors that run when it finishes or fail\nstore.handler = {\n  onSuccess (result, type, params, options) {\n    // I could use this to show some feedback message based on action type like:\n    const messages = {\n      [types.USER_SIGNON]: 'Now U\\'re an user!',\n      [types.USER_SIGNOFF]: 'Sorry :('\n    }\n\n    if (messages[type]) {\n      store.dispatch(types.NOTIFICATION, messages[type])\n    }\n\n    // If your action return some result, you should return it too!\n    return result\n  },\n  onFailure (error, type, params, options) {\n    // I can send my errors to a logger like Rollbar\n    Rollbar.error(`Action ${type}`, error)\n  },\n\n  // Specific handlers overrides global handlers and work exactly like them\n  [types.USER_SIGNIN]: {\n    onSuccess (result, type, params, options) {\n      ...\n    },\n    onFailure (error, type, params, options) {\n      ...\n    }\n  }\n}\n\nexport default store\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitorluizc%2Fvuex-handler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitorluizc%2Fvuex-handler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitorluizc%2Fvuex-handler/lists"}