{"id":3800,"date":"2020-04-10T08:52:00","date_gmt":"2020-04-10T08:52:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/"},"modified":"2026-04-24T11:42:49","modified_gmt":"2026-04-24T11:42:49","slug":"vuex-ominaisuudet-jotka-sinun-pitaisi-tietaa-jos-todella-valitat-kaupastasi","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fi\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/","title":{"rendered":"Vuex-ominaisuudet, jotka sinun pit\u00e4isi tiet\u00e4\u00e4, jos todella v\u00e4lit\u00e4t kaupastasi."},"content":{"rendered":"\n<p>That&#8217;s the reason why <strong>store<\/strong> has become so useful. It&#8217;s up to you whether you use <a href=\"https:\/\/thecodest.co\/fi\/blog\/conditional-component-visibility-in-react\/\">React<\/a> + Redux or <a href=\"https:\/\/thecodest.co\/fi\/blog\/hire-vue-js-developers\/\">Vue<\/a> + Vuex \u2013 the main goal is the same, namely <strong>keeping your <a href=\"https:\/\/thecodest.co\/fi\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">data<\/a> structured, accessible and safe at the same time<\/strong>.<\/p>\n\n\n\n<p>In this article, I&#8217;m going to show you a few examples of how to keep your Vuex store clean and efficient.<\/p>\n\n\n\n<p>Before we start, let&#8217;s assume that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>you have some experience with modern <a href=\"https:\/\/thecodest.co\/fi\/blog\/hire-javascript-developer\/\">JavaScript<\/a>,<\/li>\n\n\n\n<li>you basically know what Vue is and how to use <em>props<\/em>, <em>computed,<\/em> etc.,<\/li>\n\n\n\n<li>you are familiar with Vuex (<em>actions<\/em>, <em>mutations,<\/em> etc.) and want to make your apps better.<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/vuex.vuejs.org\/\">Vuex<\/a>, like the majority of core <strong><a href=\"https:\/\/thecodest.co\/blog\/\">Vue projects<\/a><\/strong>, is pretty well-documented and you can find many useful hacks in official docs. We have extracted some essential information from it for you.<\/p>\n\n\n\n<p>A basic Vuex store implementation looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ main.js\n\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nimport App from \".\/App\";\n\nVue.use(Vuex)\n\nconst store = new Vuex.Store((\n  state: (\n    data: null;\n  ),\n  actions: (\n      someAction: (( commit ), data) (\n          commit(\"SOME_MUTATION\", data);\n      )\n  ),\n  mutations: (\n    SOME_MUTATION (state, data) (\n        state.data = data;\n    )\n  ))\n));\n\nnew Vue((\n  el: \"#app\",\n  render: h => h(App),\n  store\n));<\/code><\/pre>\n\n\n\n<p>Usually, when your app gets bigger, you have to apply routing, some global directives, plugins, etc. It makes the <code>main.js<\/code> file much longer and more difficult to read. It&#8217;s a good practice to keep the store in an external file, like here:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ store.js\nimport Vue from 'vue'\nimport Vuex from 'vuex'\n\nVue.use(Vuex);\n\nconst state = (\n    data: null;\n);\n\nconst actions = (\n    someAction: (( commit ), data) (\n        commit(\"SOME_MUTATION\", data);\n    )\n);\n\nconst mutations = (\n    SOME_MUTATION (state, data) (\n        state.data = data;\n    )\n);\n\nexport default new Vuex.Store((\n    state,\n    actions,\n    mutations\n));\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Modules<\/strong><\/h2>\n\n\n\n<p>What should you do when the <code>store.js<\/code> file gets enormous and difficult to work on? Actually, there is a really cool Vuex feature \u2013 <strong>modules<\/strong>. They are dedicated to splitting your data into separate files.<\/p>\n\n\n\n<p>Imagine that you work on some corporate app, in which you have few domains of data, for example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>user (manage all authorizations and permissions),<\/li>\n\n\n\n<li>route parameters (manage global parameters before requests to <a href=\"https:\/\/thecodest.co\/fi\/blog\/compare-staff-augmentation-firms-that-excel-in-api-team-staffing-for-financial-technology-projects\/\">API<\/a>),<\/li>\n\n\n\n<li>sales (for your SalesMegaChart component visible in a monthly\/quarterly\/yearly context),<\/li>\n\n\n\n<li>orders (visible after clicking on the SalesMegaChart bar).<\/li>\n<\/ul>\n\n\n\n<p>&#8230;and maybe a few more. Now you have serious reasons to introduce some modularity in your store.<\/p>\n\n\n\n<p>First of all, move the <code>store.js<\/code> file to a newly created <code>store\/<\/code> directory and rename it <code>index.js<\/code>. Optionally, if you want to keep everything packed into modules, remove <em>state<\/em>, <em>actions<\/em> and <em>mutations<\/em> from the main file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ store\/index.js\n\nimport Vue from 'vue'\nimport Vuex from 'vuex'\n\nVue.use(Vuex);\n\nexport default new Vuex.Store((\n    modules: (\n        \/\/ modules will go here\n    )\n));\n\nThen, next to the `store\/index.js` file, create the first module \u2013 `store\/user.js`.\n\nimport ApiService from '..\/services\/api.service';\n\nconst state = (\n    loggedIn: false,\n    loginError: null,\n    user: null\n);\n\nconst actions = (\n    login: async (( commit ), data) (\n        try (\n            const response = await ApiService.post('\/login', data);\n            const ( user ) = response.data;\n\n            COMMIT(\"SAVE_USER\", user);\n            COMMIT(\"LOGIN_SUCCESS\");\n        ) catch (error) (\n            commit(\"LOGIN_ERROR\", error);\n        )\n    )\n);\n\nconst mutations = (\n    SAVE_USER (state, user) (\n        state.user = user;\n    ),\n\n    LOGIN_SUCCESS (state) (\n        state.loggedIn = true;\n    ),\n\n    LOGIN_ERROR (state, error) (\n        state.loginError = error;\n        state.loggedIn = false;\n    )\n);\n\nexport const user (\n    state,\n    actions,\n    mutations\n)\n\nAnd now, load the ready module into the main `store\/index.js` file:\n\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nimport ( user ) from '.\/user';\n\nVue.use(Vuex);\n\nexport default new Vuex.Store((\n    modules: (\n        user\n    )\n));<\/code><\/pre>\n\n\n\n<p>Congratulations! Now you have a really nice-looking store implementation. You can also access the data from the component (e.g., <code>UserProfile.vue<\/code>) like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;template>\n    &lt;div class=\"user-profile\">\n        &lt;h2>(( user.name ))!&lt;\/h2>\n        &lt;!-- component template goes here -->\n    &lt;\/div>\n&lt;\/template>\n\n&lt;script> import ( mapActions ) from 'Vuex';\n\n    export default (\n        name: 'UserProfile',\n\n        computed: mapState((\n            user: state => state.user\n            \/\/ user: 'user' &lt;-- alternative syntax\n        ))\n    )\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Namespaces<\/strong><\/h2>\n\n\n\n<p>Now that you know how to use modules, you should also become familiar with Vuex\u2019s <strong>namespacing<\/strong>. On the previous step, we created the <code>store\/user.js<\/code> file with the <em>user<\/em> module.<\/p>\n\n\n\n<p>The data structure defined in the <code>user.js<\/code> file is accessible from components, but you can spot that all <em>user<\/em> data goes directly to the global <code>state<\/code> context, like here:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">computed: mapState((\n    user: state => state.user\n    \/\/ user: 'user' &lt;-- alternative way\n))<\/code><\/pre>\n\n\n\n<p>When you define more modules, you&#8217;ll probably get confused about which object comes from which module. Then you should use namespaced modules and define them in this way:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">export const user (\n    namespaced: true, \/\/ &lt;-- namespacing!\n    state,\n    actions,\n    mutations\n)<\/code><\/pre>\n\n\n\n<p>From now on, all your <em>user<\/em> data (<code>state<\/code> variable from <code>store\/user.js<\/code> file) will be handled under the <code>state.user<\/code> reference:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">computed: mapState((\n    user: state => state.user.user\n    \/\/ user: 'user\/user' &lt;-- alternative way\n))\n\nA few steps later, you can achieve for the component something like this:\n\nimport ( mapActions ) from 'Vuex';\n\nexport default (\n    name: 'Dashboard',\n\n    computed: mapState((\n        sales: 'sales\/data',\n        orders: 'orders\/data',\n        sortBy: 'orders\/sortBy',\n        loggedIn: 'user\/loggedIn'\n    )),\n\n    methods: mapActions((\n        logout: 'user\/logout',\n        loadSales: 'sales\/load',\n        loadOrders: 'orders\/load'\n    )),\n\n    created() (\n        if (this.loggedIn) (\n            loadSales();\n            loadOrders();\n        )\n    )\n)\n<\/code><\/pre>\n\n\n\n<p>Bravo! So fresh, so clean&#8230; But don&#8217;t worry, refactoring never ends. Ready for the next steps?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. Communication between modules<\/strong><\/h2>\n\n\n\n<p>In the first step, I you showed some action in the <em>user<\/em> module:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const actions = (\n    login: async (( commit ), data) (\n        try (\n            const response = await ApiService.post('\/login', data);\n            const ( user ) = response.data;\n\n            COMMIT(\"SAVE_USER\", user);\n            COMMIT(\"LOGIN_SUCCESS\");\n        ) catch (error) (\n            commit(\"LOGIN_ERROR\", error);\n        )\n    )\n);<\/code><\/pre>\n\n\n\n<p>In case of failure, we&#8217;re adding login error to our store \u2013 what&#8217;s next?<\/p>\n\n\n\n<p>Here we have a few options and the choice depends on which option suits your needs better. The simplest way used the <code>v-if<\/code> directive, thanks to which an error message can be displayed if there&#8217;s an error in your store.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;template>\n    &lt;div class=\"dashboard\">\n        &lt;!-- dashboard component template -->\n        &lt;div\n            v-if=\"error\"\n            class=\"error-message\"\n        > (( error.message )) &lt;\/div>\n    &lt;\/div>\n&lt;\/template>\n&lt;script> import ( mapActions ) from 'Vuex';\n\nexport default (\n    name: 'Dashboard',\n\n    computed: mapState((\n        error: \"user\/loginError\"\n    ))\n)\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>Again, imagine that you have many modules and each <code>try\/catch<\/code> syntax generates a new error in your store. Obviously, you&#8217;re going to abuse the DRY rule this way.<\/p>\n\n\n\n<p>How can you make your error handling processes more generic?<\/p>\n\n\n\n<p>Let&#8217;s define the <em>common<\/em> module and put some logic in there that would be used globally.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ store\/common.js\n\nconst state = (\n    errors: []\n);\n\nconst actions = (\n    error: (\n        root: true,\n        handler(( commit ), error) (\n            commit(\"ERROR\", error);\n        )\n    )\n),\n\nconst mutations = (\n    ERROR (state, error) (\n        \/* this way we're gonna have the newest error on top of the list *\/\n        state.errors = [error, ...state.errors];\n    ))\n);\n\nexport const common (\n    namespaced: true,\n    state,\n    mutations\n)<\/code><\/pre>\n\n\n\n<p>Now, we can adapt the <em>user<\/em> module (and other modules as well):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">try (\n    \/\/ some action\n)catch (error) (\n    commit(\"common\/ERROR\", error, ( root: true ));\n)\n\nor in more elegant way, using our global action:\n\ntry (\n    \/\/ some action\n) catch (error) (\n    dispatch(\"error\", error);\n)<\/code><\/pre>\n\n\n\n<p>This syntax of <code>commit<\/code> and <code>dispatch<\/code> calls seems self-explanatory, but you can read more about these tricks <a href=\"https:\/\/vuex.vuejs.org\/guide\/modules.html\">here<\/a>.<\/p>\n\n\n\n<p>When you have all errors in one place, you can easily load them to your <code>Dashboard<\/code> component:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">computed: mapState((\n    errors: 'common\/errors'\n)),\n\nwatch: (\n    \/* this will be invoked after each \"common\/ERROR\" mutation, where we only add new errors to the store, one by one *\/\n    errors() (\n        this.showErrorMessage(this.errors[0]);\n    )\n)<\/code><\/pre>\n\n\n\n<p>The previous example with the <em>common<\/em> module handling errors is already an efficient solution, but you can go even further.<\/p>\n\n\n\n<p>As you can see, we&#8217;re watching changes on the <code>common\/errors<\/code> array in the store. In cases like these, when you need to determine some action on a particular mutation, you can use <a href=\"https:\/\/vuex.vuejs.org\/guide\/plugins.html\">Vuex plugins<\/a> or even Higher Order Components (HOC).<\/p>\n\n\n\n<p>I will discuss the plugins and HOCs in the next article. Meanwhile, thank you for reading this entry, hopefully, you enjoyed the examples we\u2019ve prepared.<\/p>\n\n\n\n<p>Stay tuned and keep coding!<\/p>\n\n\n\n<p><strong>Read more:<\/strong><\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/thecodest.co\/blog\/how-to-improve-vue-js-apps-some-practical-tips\/\">How to improve Vue.js apps? Some practical tips<\/a><\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/thecodest.co\/blog\/graphql-lessons-learned-in-production\/\">GraphQL: lessons learned in production<\/a><\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/thecodest.co\/blog\/shopify-spree-or-solidus-check-why-ruby-on-rails-can-help-you-develop-your-e-commerce\/\">Shopify, Spree or Solidus? Check why Ruby on Rails can help you develop your e-commerce<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Frontend-sovellusten, erityisesti monimutkaisempien, on k\u00e4sitelt\u00e4v\u00e4 paljon dataa. Ohjelmoijat ottavat k\u00e4ytt\u00f6\u00f6n erilaisia suunnittelumalleja tehd\u00e4kseen projekteistaan luettavia ja yll\u00e4pidett\u00e4vi\u00e4. Useimmissa yleisimmiss\u00e4 MVC-skenaarioissa haluamme erottaa datan sovelluksen visuaalisista osista.<\/p>","protected":false},"author":2,"featured_media":3801,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[16,8],"tags":[],"class_list":["post-3800","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-e-commerce","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Vuex features you should know if you really care about your store - The Codest<\/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:\/\/thecodest.co\/fi\/blogi\/vuex-ominaisuudet-jotka-sinun-pitaisi-tietaa-jos-todella-valitat-kaupastasi\/\" \/>\n<meta property=\"og:locale\" content=\"fi_FI\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vuex features you should know if you really care about your store\" \/>\n<meta property=\"og:description\" content=\"Frontend applications, especially the more complex ones, have to process a lot of data. Programmers introduce various design patterns to make their projects readable and maintainable. In most the common scenarios of dealing with an MVC, we want to separate the data from the visual parts of the app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/fi\/blogi\/vuex-ominaisuudet-jotka-sinun-pitaisi-tietaa-jos-todella-valitat-kaupastasi\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-10T08:52:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:42:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-191.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuuttia\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Vuex features you should know if you really care about your store\",\"datePublished\":\"2020-04-10T08:52:00+00:00\",\"dateModified\":\"2026-04-24T11:42:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/\"},\"wordCount\":771,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-191.jpg\",\"articleSection\":[\"E-commerce\",\"Software Development\"],\"inLanguage\":\"fi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/\",\"name\":\"Vuex features you should know if you really care about your store - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-191.jpg\",\"datePublished\":\"2020-04-10T08:52:00+00:00\",\"dateModified\":\"2026-04-24T11:42:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/#breadcrumb\"},\"inLanguage\":\"fi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-191.jpg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-191.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/vuex-features-you-should-know-if-you-really-care-about-your-store\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vuex features you should know if you really care about your store\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/fi\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vuex-ominaisuudet, jotka sinun pit\u00e4isi tiet\u00e4\u00e4, jos todella v\u00e4lit\u00e4t kaupastasi - Codest","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:\/\/thecodest.co\/fi\/blogi\/vuex-ominaisuudet-jotka-sinun-pitaisi-tietaa-jos-todella-valitat-kaupastasi\/","og_locale":"fi_FI","og_type":"article","og_title":"Vuex features you should know if you really care about your store","og_description":"Frontend applications, especially the more complex ones, have to process a lot of data. Programmers introduce various design patterns to make their projects readable and maintainable. In most the common scenarios of dealing with an MVC, we want to separate the data from the visual parts of the app.","og_url":"https:\/\/thecodest.co\/fi\/blogi\/vuex-ominaisuudet-jotka-sinun-pitaisi-tietaa-jos-todella-valitat-kaupastasi\/","og_site_name":"The Codest","article_published_time":"2020-04-10T08:52:00+00:00","article_modified_time":"2026-04-24T11:42:49+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-191.jpg","type":"image\/jpeg"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"4 minuuttia"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Vuex features you should know if you really care about your store","datePublished":"2020-04-10T08:52:00+00:00","dateModified":"2026-04-24T11:42:49+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/"},"wordCount":771,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-191.jpg","articleSection":["E-commerce","Software Development"],"inLanguage":"fi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/","url":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/","name":"Vuex-ominaisuudet, jotka sinun pit\u00e4isi tiet\u00e4\u00e4, jos todella v\u00e4lit\u00e4t kaupastasi - Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-191.jpg","datePublished":"2020-04-10T08:52:00+00:00","dateModified":"2026-04-24T11:42:49+00:00","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/#breadcrumb"},"inLanguage":"fi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/"]}]},{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-191.jpg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-191.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/vuex-features-you-should-know-if-you-really-care-about-your-store\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Vuex features you should know if you really care about your store"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fi"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/fi\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/comments?post=3800"}],"version-history":[{"count":16,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3800\/revisions"}],"predecessor-version":[{"id":8620,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3800\/revisions\/8620"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/media\/3801"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/media?parent=3800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/categories?post=3800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/tags?post=3800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}