🤗 You must have run a basic VUE project with Vuex! We can easily access the status of the warehouse from anywhere in the project! Let’s look at some of its uses

Vuex has five core concepts:

  • State
  • Getters
  • Mutations
  • Actions
  • Modules

An empty store/index.js structure looks like this:

import Vue from 'vue'; 
import Vuex from 'vuex';
Vue.use(Vuex); 
const store = new Vuex.Store({ 
state: { }, 
getters: { }, 
mutations:{ },
actions:{ }
}); 
export default store;
Copy the code

Vuex a single State tree: State

Vue’s official website calls store a “Single State Tree”, which contains all the application-level states in our project. State is used to store the shared states of multiple components.

Learn about modifiers: Getters

Similar to computed, it is easy to generate data that can be used directly; Imagine a scenario where you have all the names in the store displayed on the screen and the project manager comes to you

  • Project Manager: At allnamePut one in front of meHello!
  • Me: Why?
  • Project Manager: What else do I need to ask for?
  • I: ok

🤦🏻 how do you implement this operation? $this.$store.state.name = “Hello”; ? 🤦🏻♂️ You might also feel silly, and if the next time the project manager asks you to change Hello to F**K, you might want to bite your head off… Give yourself a big shave! 🤩 At this point we can skillfully use vuex provides the Getter method hot ~

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); Const store = new vuex. store ({state: {name: 'z3'}, const store = new vuex. store ({state: {name: 'z3'}), {getName(state) {return 'hello ${state.name}'; }}}); export default store;Copy the code

Use in components:

export default { mounted() { console.log(this.$store.getters.getName); }}Copy the code

🤩 Check the console again at this point, oh my God you great guy did it again!

However, it would be boring to write this.$store.getters. XXX for every page! What if you really don’t want to write about it?! We can use vuex’s syntactic sugar mapGetters to deconstruct the calculated properties directly using this:

<script> import { mapState, mapGetters } from 'vuex'; export default { mounted() { console.log(this.name); console.log(this.getName); }, computed: { ... mapState(['name']), ... mapGetters(['getName']), }, } </script>Copy the code

How to change the value: Mutations

The method used to store the state in the changed state is the only property that changes the state! This.$store.state.name = ‘XXX’ 🤯 We can take the data in the store warehouse at will, but we cannot change it at will. The correct method is mutations~, but mutations operate synchronously! Synchronous operation! Synchronous! ! Now we want every time we click btn1, we want count1+1 in store, we want count2+n in store:

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); Open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations SetCount1 (state) {state.count1 += 1; }, // setCount2(state,n) {state.count2 += n; }}}); export default store;Copy the code
<script> export default {// btn1Click() {this. codestore.com MIT ('setCount1'); Console. log(' when I press btn1 the value changes to: ${this.$store.state.count1} '); }, // Call btn2Click() with arguments {this. codestore.com MIT ('setCount2',2); Console. log(' when I pressed btn2 it changed to: ${this.$store.state.count2} '); } } </script>Copy the code

🤩 Let’s take a look at the console!

Asynchronous Actions: Actions

We use Actions if we need to asynchronously modify data in state! It exists because there are other asynchronous operations when we modify state data! Vuex didn’t want the asynchronous operation to be included in mutations, resulting in the birth of Actions! 🤠 one day Zhang SAN saw tired of his face, decided to go to the barber shop to cut a pot head, and then dyed a yellow hair! But you can’t dye your hair while you’re cutting it! What can we do about it?! Modify the store/index. Js

Open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = open mutations { setColor(state, payload) { state.color = payload.color; },}, actions: {// cutHair(content) {content.state.length = 'short'; return new Promise(resolve => { setTimeout(() => { content.commit('setColor', { color: 'yellow' }); resolve(); }, 3600000); }); }}});Copy the code
Async Mounted () {console.log(' last length: ${this.$store.state.length} '); Console. log(' used to color: ${this.$store.state.color} '); await this.$store.dispatch('cutHair'); Console. log(' Now length: ${this.$store.state.length} '); Console. log(' now color: ${this.$store.state.color} '); },Copy the code

🤩 let’s have a look at Zhang SAN’s recent situation!

Modularity: Modules

It’s a concept

Just like mapState and mapGetters in the beginning, we can use mapMutations in the component instead of this.store.com MIT (‘XXX’)!

Article reference blogger: juejin.cn/user/782508… Thank you!