What is Vuex

What is Vuex?

Vuex is a state management pattern + library for vue.js applications. It serves as a centralized store for all of the components under an application, with rules ensuring Mutated in a predictable fashion. It also integrates with Vue's official Devtools extension to provide advanced features such as Zero-config Time-travel Deb Ugging and State snapshot Export/import. What's a "state Management Pattern"?

Let's start with a simple Vue counter app:

New Vue ({
  //state
  data () {
    return {
      count:0
    }
  },
  //view
  Template: '
    <div >{{count}}</div>
  ',
  //Actions
  methods: {
    increment () {
      this.count++
    }
  }
})

It's a self-contained app with the following Parts:the state, which are the source of truth that drives our app; The view, which is just a declarative mapping of the State; The actions, which is the possible ways the state of could change in reaction to user inputs from the view.

This is a extremely simple representation of the concept of "one-way data Flow":

However, the simplicity quickly breaks down when we had multiple components which share common state:multiple views May D Epend on the same piece of state. Actions from different, need to mutate, the same piece of state.

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

So why don ' t we extract the all the components, and manage it in a global singleton? With this, we component tree becomes a big "view", and any component can access the State or trigger actions, no matter w Here they is in the tree!

In addition, by defining and separating the concepts involved in state management and enforcing certain rules, we also giv E Our code more structure and maintainability.

This was the basic idea behind Vuex, inspired by Flux, Redux and the Elm Architecture. Unlike the other patterns, Vuex was also a library implementation tailored specifically for Vue.js to take advantage of its Granular reactivity system for efficient updates.

When is should I use It?

Although Vuex helps us deal with GKFX state management, it also comes with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity.

If you've never built a large-scale SPA and jump right into the Vuex, it may feel verbose and daunting. That's perfectly normal-if your app is simple and you'll most likely be fine without Vuex. A Simple global event bus is need. But if you are building a Medium-to-large-scale SPA, chances is you has run into situations so make your think about Ho W to better handle state outside of your Vue components, and Vuex would be natural next step for you. There ' s a good quote from Dan Abramov, the author of Redux:

Flux libraries is like glasses:you ' ll know when you need them.