When should I use Vuex?

Question

Now I start to learn vue, and I\'m creating SPA for editing database. Now I can\'t understand where I should use a Vuex. I can use props and $emit everywhere an

Answer 1

According to this awesome tip from Vuedose blog

Vue.js 2.6 introduced some new features, and one I really like is the new global observable API.

Now you can create reactive objects outside the Vue.js components scope. And, when you use them in the components, it will trigger render updates appropriately.

In that way, you can create very simple stores without the need of Vuex, perfect for simple scenarios like those cases where you need to share some external state across components.

For this tip example, you’re going to build a simple count functionality where you externalise the state to our own store.

First create store.js:

import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

If you feel comfortable with the idea of mutations and actions, you can use that pattern just by creating plain functions to update the data:

import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

Now you just need to use it in a component. To access the state, just like in Vuex, we’ll use computed properties, and methods for the mutations:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="setCount(count + 1);">+ 1</button>
    <button @click="setCount(count - 1);">- 1</button>
  </div>
</template>

<script>
  import { store, mutations } from "./store";

  export default {
    computed: {
      count() {
        return store.count;
      }
    },
    methods: {
      setCount: mutations.setCount
    }
  };
</script>

Answer 2

Look at the vuex documentation; it describes all the reasons why/when you want to use vuex https://vuex.vuejs.org.

For instance, multiple components require the same information, controlling mutations, validations, etc.

Answer 3

Yes, you can do anything without the use of Vuex, but with time, if your application is getting larger then it would be difficult to maintain,

according to vuex documentation,

problem one, passing props can be tedious for deeply nested components, and simply doesn't work for sibling components. problem two, we often find ourselves resorting to solutions such as reaching for direct parent/child instance references or trying to mutate and synchronize multiple copies of the state via events. Both of these patterns are brittle and quickly lead to unmaintainable code.

Hope it answers your question.

Answer 4

The main purpose of using Vuex (which is Vue's version of Redux) is state (or data) management. In layman's terms, it's having a single source of truth (for your data).

It opposes the common pattern of emitting an event when data changed so other parts of the application can keep their data in sync with the current component's data.

Rather than allowing one particular component to change the data directly, you delegate the change to a separate module: the store. Any component using that data will be notified about the change. This becomes extremely useful in complex applications, where the common emit pattern runs the risk of creating cyclic update loops.

Apps using the Redux pattern benefit from:

• predictability of outcome,
• ease of testing
• code maintainability and scalability
• separation of concerns
• ease of debugging (time travel: the ability to undo or replay a particular change for debugging purposes).

In short, it gives developers control and confidence, as it makes understanding and modifying complex code, data or app behavior significantly easier.

---

Like any other pattern (or system, or tool), the Redux pattern can be over-used. It should be obvious you don't have to keep data that's only used by one component in the store. Since no other component needs to know about any changes to that data, one should manage it in the component using it.

Vuex allows organisation of data into modules so you can keep everything tidy and maintainable.

Last, but not least, one of the most useful benefits of using the Redux pattern is making SSR (server side rendering) implementation a breeze. SSR greatly improves optimization and user experience and increases the perceived performance of the application.