The first word

There is already an official tutorial, so why write this tutorial? To tell the truth, return true not my idle egg pain, the official tutorial is really too official, for the beginner Vuex children’s shoes, must look at the official tutorials, a lot of places like read the bible, for example, “omar nima, tooth”, all words, just don’t know what to say, do not believe, you can poke go in and have a look.

Of course, for god level a look to understand, that goes without saying, affirmation is to see the official more authority. In addition, if you are familiar with Flux, Redux and The Elm Architecture, you can also follow The official, because The official also said that Vuex’s routines are basically transferred from there after integration, but Vuex only loves vuue.js.

The reason why I wrote this tutorial, mainly because he has just started working with Vuex, pain after, bitter over and hurt, so painful experience, in order to let oneself have better control of Vuex, also in order not to let the new children’s shoes were Vuex flirt after complaining all the time, so have decided to take the official these abstract words and concepts, Even behind you encourage the teacher little sister can understand the language, share, help you in the front of the road more and more smooth, smooth to find a job with the encouragement of the teacher.

Say a

Vuex is vuue.js’s car, so if you don’t know vuue.js, you should hook up with vuue.js and bring it with you. Of course, since you can wander here, you must be at least friends with Vue.js.

It’s a bit wordy, don’t be bothered, and there’s a bit of foreplay involved in writing a tutorial, the first time after all.

The installation

About the specific installation of Vuex, will not say here, this official or relatively clear, stamp this entry. But there are two things to note:

  • In a modular packaging system, you must explicitly install Vuex via vue.use (), for example:

    import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex) // This function must be called to inject VuexCopy the code

  • When referencing Vuex using a global script tag, you don’t need to bother. You can just reference it directly, but in the order in which you want to reference it:

    // Vuex is automatically installed after Vue"/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
Copy the code

The Script approach may seem automated, but as you get closer to it, you’ll see that modularity is actually our best posture.

Uncover the mystery of Vuex

When we get a tool, the first thing we need to figure out is what it’s going to help us solve. Like a hammer, you can break eggs and make phone calls, like an apple, you can not only eat but also play. So Vuex, if the Vue. Js as passers-by (walk), then Vuex is his santana, if he wants to go to the door to buy packs of cigarettes, that just go to the past, instead of a car in the past is a kind of burden, but if he wants to go to a few tens of kilometers school flowers, that santana had to come in handy, or such as he walked in the past, Maybe the flowers are gone.

Of course, the analogy is just to show us the value of Vuex, so what can it do in practical application? When does it need to turn over its cards?

Let’s start with the official code:

New Vue({// state data sourcedata () {
    returnTemplate: '<div>{{count}}</div>', // Actions Events methods: {increment () {
      this.count++
    }
  }
})
Copy the code

This is a very simple incremental count function page, and vue.js has a leg, should understand in seconds. Increment count increment via event increment and render to the interface.

In fact, this way, like walking to buy cigarettes, belongs to the short-range effect, which is officially called “one-way data flow”, which is easy to understand.

However, the situation has changed, and now there are two pages A and B, with the following two requirements:

  • I want them all to be able to manipulate count.
  • If A changes the count, B should know it first, and IF B changes it, A should also know it first.

How to do? For those with a bit of development experience, it is easy to think of separating the data source count and managing it in a global variable or global singleton pattern, so that this state can be easily accessed on any page.

Yeah, that’s the damn idea behind Vuex, that’s what it does. Isn’t there a feeling of being cheated by the lofty name of Vuex? Isn’t it the global model? It can be done without Vuex.

Yes, it can be done, just like you can go to school to look at flowers without Santana, but the process is different.

The purpose of Vuex is to manage shared state. To do this, Vuex has a set of rules to follow, such as changing data source state, triggering actions, etc., in order to make the project structure clearer and easier to maintain.

So let’s look at the official description:

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.

There was no moment of clarity.

When do you flip Vuex

When you know what Vuex is doing, it’s much easier to choose when to flip. Just like the previous analogy, you go next door to get a pack of cigarettes, you drive a Santana, and you run out of cigarettes while you look for a parking space.

So, we have to weigh the short and long term benefits based on the needs of the project, and if you’re not going to build a large, one-page app, Vuex can still be a burden. For some small projects, if you are too lazy to walk and feel the trouble of driving, you can also ride a shared bike.

Shared bikes here refer to a simple store mode in the official system, which is actually a simple global object.

The difference between global objects and Vuex is fairly straightforward:

Vuex differs from a purely global object in two ways:

  1. Vuex’s state storage is reactive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.
  2. You can’t just change the state in the store. The only way to change the state in a store is to commit mutation explicitly. This allows us to easily track each state change, which allows us to implement tools that help us better understand our application.

A simple example

Use (Vuex) const store = new vuex. store ({state: {count: 0}, mutations: { increment (state) { state.count++ } } })Copy the code

At the heart of every Vuex application is the Store. A Store is basically a container that contains most of the states in your app.

Note: if mutations do not know what it is, it doesn’t matter, it will be specially explained later. It can be simply understood as that the data in state can only be modified using the method in it.

store.commit('increment'Open the mutations method console.log(store.state.count) // -> 1Copy the code

The official reasons for the design are as follows:

We committed mutation rather than changing store.state.count directly because we wanted to track state changes more explicitly. This simple convention makes your intentions clear, making it easier to interpret in-app state changes as you read the code. In addition, this gives us the opportunity to implement debugging tools that record every state change and save a snapshot of the state. With it, we can even implement a time-travel debugging experience.

Because the state in a store is reactive, calling the state in a store in a component is as simple as simply returning it in a evaluated property. Triggering changes is also just a mutation submission in the component’s methods.

If you don’t understand that last sentence, don’t worry, we’ll get to that in the next chapter.

PS

Come to some serious, here, the first article is actually finished, of course, the content here is I read the official tutorial, their own understanding, if there is no understanding in place, welcome to clap brick.

Reprint statement:

Author: Ohiro said

The original link: www.jianshu.com/p/120eaf503…

Afterword.

The above is brother Hu to share the content today, like partners remember to like, collect ah, pay attention to Brother Hu has words, learning front end don’t get lost, welcome a lot of messages exchange…

Brother Hu has words, a technology, feelings of brother Hu! The current jingdong front – end siege lion. Hu Ge has words, focus on the field of front-end technology, share front-end system architecture, framework implementation principle, the latest and most efficient technology practice!