“This is the 26th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Vuex

Before we get into Vuex simulation, let’s first think about the situation in which we need to use Vuex

Scenario 1: The red pointing line is where the data is going, so we just need to use itemit,propYou can cope with it!

But if the flow of data changes to

Scenario 1:

In the absence of Vuex; You might have a headache! Oh my God (there are lots of ways to do it!) (For example, build simple state management from zero) (just to say Vuex Hey)

Buy it buy it!

What is Vuex?

Since this is so easy to say, we also need to know what Vuex is!

  • Vuex is a state management mode + library developed specifically for vue.js applications.

  • Vuex stores state that needs to be shared in a centralized manner

  • Vuex is used for state management, complex component communication, and page sharing

  • Vuex is integrated with DevTools to provide time-travel embassy travel history rollback

When is Vuex used?

When we need to use Vuex, we need to understand some of the new concepts it brings, some of the apis

  • Do not use Vuex for unnecessary emptying

    • When our project is small and there is not much state sharing between components, the cost of using Vuex is not proportional to the corresponding return. A simple store mode is enough, if not, there is bus!

  • Medium – to large-sized single-page applications

    • Multiple views depend on the same state: a shopping cart, for example
    • Actions from different attempts require changes to the same state

To quote Redux author Dan Abramov:

Flux architectures are like glasses: you know when you need them.

The core concept of Vuex

  • The State:
    • Definition: Vuex uses a single state tree that contains all application-level states in a single object.
    • Use: Use mapState to simplify the use of State in views, and mapState returns computed properties
  • Getter
    • Definition: A Getter is a computed property in a store
    • Use: Use mapGetter to simplify use in views
  • mutation
    • Definition: The only way to change the state in the store of Vuex is to commit mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback is where we actually make the state change, and it accepts state as the first argument
    • Use: Use mapMutations to simplify use in views
  • Action
    • Action is similar to mutation, except that:
      • The Action commits mutation rather than a direct state change.
      • Actions can contain any asynchronous operation.
    • Use: Use mapActions to simplify use in views
  • Module
    • Definition: Due to the use of a single state tree, all states of an application are grouped into one large object. When the application becomes very complex, the Store object can become quite bloated. To solve these problems, Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, getter, and even nested submodules.

    Now that the concept of Vuex is basically reviewed, our next goal is to write the Vuex by hand! Come on, come on