First of all, on the introduction:
Vuex is a'state management mode' specially developed for Vue.js applications. It uses centralized storage and management of the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner.
The most practical thing is just an example:
Suppose you have several data and several operations that need to be used on multiple components. If each component is removed and used, it will be very troublesome. The code is really different. It's stinky and long. Of course, if you don't have a lot of operations and data that need to be used in multiple components, you can actually use this vuex. This thing is up to you!
Here comes the point:
1. First of all, in order to facilitate maintenance of the project format and relatively standard, we first create a store folder in the directory, and create a store.js file below:
2. Simple and clear, first introduce Vue and Vuex and don't forget Vue.use(Vuex);
Of course, your Vuex must first have something to do with main.js. Don’t pay attention to the wavy line in main.js in the figure below. This is a new file I created at random. It doesn’t affect it here. Don’t be scared by it;
= "Introducing the store file =" and the Vue instance will have to mount the store, this is ok, let's continue,
and then we should start writing our vuex business code, then, there is a question, how to save our data?
3. Now start the dominating part of Vuex new Vuex.Store(())****
In this picture, we can see that there is a state:{} comment in new Vuex.Store.
This is the state object that you want to set up for global access, that is, if you need count, throw a count in, and you need price.
Throw a price in. Here I lost a count and ChangeShowCom two different data types as a comparison.
4. How to get the data in state in the page?
Through this.$store.state.count, you can get the count in state, which is 0. Let’s not say much, let’s take a look.
5. Getters = "getters are similar to computed components, which facilitate the direct generation of some data that can be used directly. When the assembled data is to be used on multiple pages, getters can be used to do it.
The comments are also written, getters can monitor the changes of state values in real time (the latest state)
I named the method to get the count value in getters getCount and need to pass in state
So how to get the value of count that carries changes through getters?
The specific effects of this.$store.getters.getCount are in column 4, so I won’t repeat them here.
6. So, what should we do if we want to change the value of count? At this time mutations can be used.
The only way to modify the value in the store is to submit a mutation to modify. We now add two buttons to the Hello World.vue file, one plus 1 and the other minus 1.
Here we click the button to call add (the method of performing addition) and del (the method of performing subtraction), and then directly submit the method modification value in the mutations inside:
modify the store.js file, add mutations, define two functions in the mutations, Used to add 1 and subtract 1 to count,
The two methods defined here are the two methods submitted by commit above:
we can pass parameters to the function in mutations for calculation. Here is num.
Upper effect:
Very good, the count value has changed. I clicked twice, and I can see the process effect in Vuex in Vue Devtools. The
payload: 1 is the value change. 1 The type operation method is addCount, which is the root method of mutations.
ok! perfect.
7. Go to Actions
Action is similar to mutation, except that:
- Action can contain any asynchronous operation.
- Action submits a mutation instead of directly changing the state.
Let's take a look:
Then we go to modify the Hello World.vue file:
Here we modify the commit to submit mutations to use dispatch to submit actions; we click on the page, and the effect is the same.
Now let's take a look at the effect. Here I clicked 6 more times. Obviously, the effect is the same.
8. Take a look at the good things in Vuex, auxiliary functions mapState, mapGetters, mapActions
If we don’t like this long way of writing "this.$store.state.count" and "this.$store.dispatch('funName')" on the page,
Then we can use mapState, mapGetters, and mapActions to not be so troublesome;
And we use it with... extension symbols.
Normal display, the effect is the same, we can no longer use very long writing to call.
The content is extracted from: https://www.cnblogs.com/mica/p/10757965.html
That's it for now! Comments and questions are welcome
The content of this article will be constantly updated!