{"id":275,"date":"2020-03-23T22:07:00","date_gmt":"2020-03-23T22:07:00","guid":{"rendered":"http:\/\/104.248.61.172\/?p=49"},"modified":"2022-09-27T09:26:28","modified_gmt":"2022-09-27T07:26:28","slug":"redux-vs-vuex-for-state-management-in-vue-js","status":"publish","type":"post","link":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/","title":{"rendered":"Redux vs Vuex for state management in Vue.js"},"content":{"rendered":"\r\n<p class=\"wp-block-paragraph\">We just finished the middle-sized project in Vue.js, and since I was building a complex app I needed a solution to manage the app state. I spent some time playing with both Redux and Vuex. In this post, I am going to show you the main differences between those two libraries and which one I picked for my solution. Ready? Let\u2019s go!<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">What is state management?<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">State management is a way of managing the state inside your application, making sure that your UI is always reflecting your app changes. There are multiple ways to manage the state in your app, and in many cases, you don\u2019t need libraries like Redux or Vuex, but if your app starts to become wild and complicated, state management solution can help you evaluate those problems.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">In the past, it was not uncommon to have pieces of state across our application tucked inside of controllers, services, routes, directives (AngularJS), local storage, session storage, cookies, and some other alternatives.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">When the application grows, this approach is really hard to scale and this is where Flux and React stepped in.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">React changed the way we approach state-management. Redux (based on Flux) is front and center of this shift as it introduced an elegant, yet profoundly simple way to manage application state. Vuex followed Redux and found the place amount Vue developers.<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">What is\u00a0Redux?<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Redux is a framework-agnostic state management library.\u00a0Something that I noticed during development with React is that Redux is created with React in mind. If you\u2019re thinking about using Vue with Redux, Vuex is probably a better state management library for maintaining performance. Here are some things to know about the two:<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">Actions<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Let\u2019s start with the easiest part of Redux. Actions! Actions are very simple objects with a \u201ctype\u201d property and the minimum number of other properties and values that are necessary to explain the action we intend to make in the state.<br \/>Actions are the only way to change the state and changing state is done by \u201cdispatching\u201d an action using store. Here is an example:<\/p>\r\n\r\n\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { createStore } from 'redux'\r\nimport { ActionTypes as types } from '..\/constants'\r\n\r\nvar defaultState = {\r\n  name: ''\r\n};\r\n\r\nfunction reducer(state = defaultState, action) {\r\n  switch(action.type) {\r\n    case types.CHANGE_NAME:\r\n      return {\r\n        ...state,\r\n        name: action.data.name\r\n      }\r\n    default:\r\n      return state\r\n  }\r\n}\r\n\r\n\/\/ Let's create the store, and add root reducer to it\r\nvar store = createStore(reducer)\r\n\r\n\/\/ This is where we dispatch action to the store\r\nstore.dispatch({type: types.CHANGE_NAME, data: {name: \"Petar\"}})<\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">You can see that .dispatch() takes \u201caction\u201d object and sends this to the reducer. If the action isn\u2019t recognized and no change is dispatched, the state defaults to the old state.<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">Reducers<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">This is where the fun stuff happens and where we change the state in the store based on the action \u201ctype\u201d. Reducers are pure functions that are used to implement how the next state is calculated from the current state and the action.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Since Redux has only one store, we use multiple reducers to manage parts of the global state (store). This concept allows you to have multiple parts inside your store, all managed by different reducers.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">These reducers can then be combined into one root reducer to manage all of your application states. The redux store saves the complete state tree returned by the root reducer.<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">Store<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">This is a place where you store the state of your application. The store is nothing more than an object containing different properties and values. There is only one store in Redux (root store) and one root reducer. The point with the root store is that you can have multiple reducers that work on different parts of your store.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">To change the state, you have to dispatch an action to it. Once you dispatched an action you can add a change listener called \u201csubscribe\u201d. By subscribing to the store you can check if an action is \u2018dispatched\u2019 and is your state tree changed.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">While this is working, this might not be the best solution for your Vue.js project. The biggest reason why is because Redux replaces the state object on every update.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">React is different from Vue in the way it processes updates: React renders a virtual DOM then calculates optimal DOM operations to make the currently rendered DOM match the new Virtual Dom. But it has no way of knowing whether a particular component needs to re-render or not based on the new data. Vue instances keep track of which bits of data they depend on to render. These instances automatically register what needs to re-render when the data changes.<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">Vuex<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Vuex is very similar to Redux and also inspired by Flux.\u00a0Unlike Redux,\u00a0Vuex mutates the state rather than making the state immutable.\u00a0This approach removes the need for having a reducer, so in Vuex reducers are replaced with something called Mutations.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">This allows Vue.js to automatically know which components need to be re-rendered when the state changes. Instead of breaking down state logic with specialized reducers, Vuex is able to organize its state logic with stores called modules.<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">Mutations<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">The only way to change state in a Vuex store is by committing a mutation. Mutations are very similar to the events and each mutation has a string type and a handler. The handler function is where we perform actual state modifications, and it will receive the state as the first argument:<\/p>\r\n\r\n\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const store = new Vuex.Store({\r\n  state: {\r\n    count: 1\r\n  },\r\n  mutations: {\r\n    increment (state) {\r\n      \/\/ mutate state\r\n      state.count++\r\n    }\r\n  }\r\n})<\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">You cannot directly call a mutation handler. Think of it like: &#8220;When a mutation with type increment is triggered, call this handler&#8221;. To invoke a mutation handler, you need to call store.commit with its type:<\/p>\r\n\r\n\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">store.commit('increment')<\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">One thing to remember is that mutations are always synchronous to ensure that the state isn\u2019t dependent on the timing and order of unpredictable events.<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">Actions<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Actions are similar to mutations and work like Redux actions. Actions can\u2019t mutate the state, rather action commit mutations.\u00a0One other benefit of working with Vuex actions is that actions can contain arbitrary asynchronous operations. This is great when you need to call your API and is much more organized comparing to<\/p>\r\n\r\n\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const store = new Vuex.Store({\r\n  state: {\r\n    count: 0\r\n  },\r\n  mutations: {\r\n    increment (state) {\r\n      state.count++\r\n    }\r\n  },\r\n  actions: {\r\n    increment (context) {\r\n      context.commit('increment')\r\n    }\r\n  }\r\n})<\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">To Dispatch an action we use:<\/p>\r\n\r\n\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">store.dispatch('increment')<\/pre>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">Store<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Vuex uses a single state tree \u2014 that is, this single object contains all your application-level state and serves as the \u201csingle source of truth\u201d. This is very similar to Redux and the Store is the center of every Vuex application.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Since Vue instances keep track of which bits of data they depend on to render, vuex is taking advantage of that and when components get the state from the store, these components can reactively and efficiently update whenever the store\u2019s state changes. One thing to remember is that the store\u2019s state can only be changed by committing mutations.<\/p>\r\n\r\n\r\n\r\n<h1 class=\"wp-block-heading\">The finals<\/h1>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">While Redux and Vuex are amazing state management libraries and patterns, I prefer Vuex over Redux when working with Vue. Here are the main reasons:<\/p>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li>Mutations are easier to work with then Reducers<\/li>\r\n<li>Asynchronous actions are much more organized in\u00a0Vuex. There is no need to write\u00a0_ON_LOAD,\u00a0_SUCCESS\u00a0or\u00a0_FAIL\u00a0middle term state actions.<\/li>\r\n<li>Out of the box dev tools<\/li>\r\n<li>Much easier setup. It is easy as Vue.use(Vuex)<\/li>\r\n<li>Vuex takes advantage of Vue.js uniqueness<\/li>\r\n<\/ol>\r\n","protected":false},"excerpt":{"rendered":"<p>We just finished the middle-sized project in Vue.js, and since I was building a complex app I needed a solution<\/p>\n","protected":false},"author":6,"featured_media":512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Redux vs Vuex for state management in Vue.js - Agilno<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Redux vs Vuex for state management in Vue.js - Agilno\" \/>\n<meta property=\"og:description\" content=\"We just finished the middle-sized project in Vue.js, and since I was building a complex app I needed a solution\" \/>\n<meta property=\"og:url\" content=\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Agilno\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-23T22:07:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-27T07:26:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"770\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Petar Vukasinovic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Petar Vukasinovic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/\"},\"author\":{\"name\":\"Petar Vukasinovic\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b\"},\"headline\":\"Redux vs Vuex for state management in Vue.js\",\"datePublished\":\"2020-03-23T22:07:00+00:00\",\"dateModified\":\"2022-09-27T07:26:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/\"},\"wordCount\":1150,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg\",\"articleSection\":[\"Frontend Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/\",\"url\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/\",\"name\":\"Redux vs Vuex for state management in Vue.js - Agilno\",\"isPartOf\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg\",\"datePublished\":\"2020-03-23T22:07:00+00:00\",\"dateModified\":\"2022-09-27T07:26:28+00:00\",\"author\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b\"},\"breadcrumb\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#primaryimage\",\"url\":\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg\",\"contentUrl\":\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg\",\"width\":1280,\"height\":770},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/makeit.com.hr\/agilno\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Redux vs Vuex for state management in Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#website\",\"url\":\"https:\/\/makeit.com.hr\/agilno\/\",\"name\":\"Agilno\",\"description\":\"We build experiences, products, and businesses that create results\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/makeit.com.hr\/agilno\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b\",\"name\":\"Petar Vukasinovic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g\",\"caption\":\"Petar Vukasinovic\"},\"url\":\"https:\/\/makeit.com.hr\/agilno\/author\/petar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Redux vs Vuex for state management in Vue.js - Agilno","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/","og_locale":"en_US","og_type":"article","og_title":"Redux vs Vuex for state management in Vue.js - Agilno","og_description":"We just finished the middle-sized project in Vue.js, and since I was building a complex app I needed a solution","og_url":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/","og_site_name":"Agilno","article_published_time":"2020-03-23T22:07:00+00:00","article_modified_time":"2022-09-27T07:26:28+00:00","og_image":[{"width":1280,"height":770,"url":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg","type":"image\/jpeg"}],"author":"Petar Vukasinovic","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Petar Vukasinovic","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#article","isPartOf":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/"},"author":{"name":"Petar Vukasinovic","@id":"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b"},"headline":"Redux vs Vuex for state management in Vue.js","datePublished":"2020-03-23T22:07:00+00:00","dateModified":"2022-09-27T07:26:28+00:00","mainEntityOfPage":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/"},"wordCount":1150,"commentCount":0,"image":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg","articleSection":["Frontend Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/","url":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/","name":"Redux vs Vuex for state management in Vue.js - Agilno","isPartOf":{"@id":"https:\/\/makeit.com.hr\/agilno\/#website"},"primaryImageOfPage":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#primaryimage"},"image":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg","datePublished":"2020-03-23T22:07:00+00:00","dateModified":"2022-09-27T07:26:28+00:00","author":{"@id":"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b"},"breadcrumb":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#primaryimage","url":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg","contentUrl":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/Redux-vs-Vuex-2.jpg","width":1280,"height":770},{"@type":"BreadcrumbList","@id":"https:\/\/makeit.com.hr\/agilno\/blog\/redux-vs-vuex-for-state-management-in-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/makeit.com.hr\/agilno\/"},{"@type":"ListItem","position":2,"name":"Redux vs Vuex for state management in Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/makeit.com.hr\/agilno\/#website","url":"https:\/\/makeit.com.hr\/agilno\/","name":"Agilno","description":"We build experiences, products, and businesses that create results","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/makeit.com.hr\/agilno\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b","name":"Petar Vukasinovic","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g","caption":"Petar Vukasinovic"},"url":"https:\/\/makeit.com.hr\/agilno\/author\/petar\/"}]}},"_links":{"self":[{"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/posts\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":1,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/posts\/275\/revisions\/476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/media\/512"}],"wp:attachment":[{"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}