{"action":"created","issue":{"url":"https://api.github.com/repos/petervmeijgaard/vue-2-boilerplate/issues/62","repository_url":"https://api.github.com/repos/petervmeijgaard/vue-2-boilerplate","labels_url":"https://api.github.com/repos/petervmeijgaard/vue-2-boilerplate/issues/62/labels{/name}","comments_url":"https://api.github.com/repos/petervmeijgaard/vue-2-boilerplate/issues/62/comments","events_url":"https://api.github.com/repos/petervmeijgaard/vue-2-boilerplate/issues/62/events","html_url":"https://github.com/petervmeijgaard/vue-2-boilerplate/issues/62","id":320724002,"number":62,"title":"Vuex structure without code duplications","user":{"login":"roquie","id":3214290,"avatar_url":"https://avatars3.githubusercontent.com/u/3214290?v=4","gravatar_id":"","url":"https://api.github.com/users/roquie","html_url":"https://github.com/roquie","followers_url":"https://api.github.com/users/roquie/followers","following_url":"https://api.github.com/users/roquie/following{/other_user}","gists_url":"https://api.github.com/users/roquie/gists{/gist_id}","starred_url":"https://api.github.com/users/roquie/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/roquie/subscriptions","organizations_url":"https://api.github.com/users/roquie/orgs","repos_url":"https://api.github.com/users/roquie/repos","events_url":"https://api.github.com/users/roquie/events{/privacy}","received_events_url":"https://api.github.com/users/roquie/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-05-07T08:48:49Z","updated_at":"2018-05-22T03:33:48Z","closed_at":null,"author_association":"NONE","body":"Hi! I think this question excites many users and maybe it is worth adding to boilerplate as example code.\r\n\r\nVuex based on global state and if you want to use form validation (server side) and API pagination your should duplicate state object for any CRUD operation.\r\n\r\nSo, for example how use pagination with vuex:\r\n```javascript\r\n// src/store/modules/position/actions.js\r\nimport Transformer from '@/transformers/PositionTransformer';\r\nimport PositionProxy from '@/proxies/PositionProxy';\r\nimport _ from 'lodash';\r\n\r\nexport const all = ({ commit }, payload) => {\r\n  const page = _.get(payload, 'page', 1);\r\n  new PositionProxy(payload)\r\n    .setParameters({ page, per_page: 5 }).all().then((response) => {\r\n      commit('ALL', Transformer.fetchCollection(response.data));\r\n      commit('PAGINATE', Transformer.paginate(response.meta.pagination));\r\n    });\r\n};\r\n\r\nexport const create = ({ commit }, payload) => {\r\n  new PositionProxy().create(payload).then((response) => {\r\n    commit('ACTION_MESSAGE', response.message, { root: true });\r\n  }).catch((response) => {\r\n    if (response.status === 422) {\r\n      commit('VALIDATION', response.data.error.validation);\r\n    }\r\n  });\r\n};\r\n\r\nexport default {\r\n  all,\r\n  create,\r\n};\r\n\r\n// src/store/modules/position/mutations.js\r\nexport default {\r\n  ['PAGINATE'](state, pagination) {\r\n    state.pagination = pagination;\r\n  },\r\n  ['ALL'](state, items) {\r\n    //console.log(items);\r\n    state.all = items;\r\n  },\r\n  ['VALIDATION'](state, array) {\r\n    state.validation = array;\r\n  },\r\n};\r\n\r\n// src/store/modules/position/state.js\r\nexport default {\r\n  all: [],\r\n  pagination: {\r\n    total: 0,\r\n    perPage: 5,\r\n    currentPage: 1,\r\n    totalPages: 1,\r\n    links: []\r\n  },\r\n  validation: []\r\n};\r\n\r\n// getters.js and index.js like as boilerplate\r\n```\r\n\r\n`Position` is a CRUD object which have a two standard things: **pagination** for list all items in table and server side **validation** .\r\n\r\nIf u want add more CRUD object this things will be same and always will be duplicate. Because state should be unique for any object. If pagination will become global state, multiple tables will be works together on the one page. Same situation with validation, if use global validation state for any form.\r\n\r\nOkay, I can merge object to prevent duplicate for vuex module files. But what do with duplications in `actions` of create/update/delete actions where I should handle validation? This part:\r\n\r\n```javascript\r\n//...\r\n  }).catch((response) => {\r\n    if (response.status === 422) {\r\n      commit('VALIDATION', response.data.error.validation);\r\n    }\r\n  });\r\n\r\n```\r\n\r\nMaybe your know how to solve this problem? How to put it in a common place (`commit()` allow only in action callback)?"},"comment":{"url":"https://api.github.com/repos/petervmeijgaard/vue-2-boilerplate/issues/comments/390852234","html_url":"https://github.com/petervmeijgaard/vue-2-boilerplate/issues/62#issuecomment-390852234","issue_url":"https://api.github.com/repos/petervmeijgaard/vue-2-boilerplate/issues/62","id":390852234,"user":{"login":"causztic","id":2081441,"avatar_url":"https://avatars1.githubusercontent.com/u/2081441?v=4","gravatar_id":"","url":"https://api.github.com/users/causztic","html_url":"https://github.com/causztic","followers_url":"https://api.github.com/users/causztic/followers","following_url":"https://api.github.com/users/causztic/following{/other_user}","gists_url":"https://api.github.com/users/causztic/gists{/gist_id}","starred_url":"https://api.github.com/users/causztic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/causztic/subscriptions","organizations_url":"https://api.github.com/users/causztic/orgs","repos_url":"https://api.github.com/users/causztic/repos","events_url":"https://api.github.com/users/causztic/events{/privacy}","received_events_url":"https://api.github.com/users/causztic/received_events","type":"User","site_admin":false},"created_at":"2018-05-22T03:33:48Z","updated_at":"2018-05-22T03:33:48Z","author_association":"NONE","body":"I think you can add to `Axios.interceptors.response` to commit an action when the status is 422, similar to how the boilerplate manages a 401. That is, if you don't having a global error state."}}
{"actor":{"display_login":"causztic"}}