Detailed explanation of the core concepts and basic usage of vuex

introduce

Vuex is a mechanism to implement global state (data) management of components, which can easily implement data sharing between components.

start

Install

①Direct download method

Create a file to/vuexThe contents in this URL are placed in this folder.

②CND method

<script src="/npm/es6-promise@4/dist/"></script>

③NPM method

npm install vuex --save

④Yarn method

yarn add vuex

How to use NPM installation

1. Create a store/ folder in the scr file and write the following content.

import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
export default new ({
state: {},
mutations: {},
actions: {},
modules: {}
})

2. Introduce it in and then mount it into the Vue instance

import Vue from 'vue'
import store from './store'
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Store concept and use

concept:

It is the sharing of data between components.

Only mutations can modify data in the store

use:

Define first and then use

definition

state: {
  num: 0
}

use

Method 1 (recommended)

&lt;div&gt;{{ numAlias }}&lt;/div&gt;

import { mapState } from 'vuex'
export default {
  // Calculate the function  computed: mapState({
    // Pass the string parameter 'count' is equivalent to `state => `    numAlias: 'num',//The commonly used key is the data received by the value of the name given by itself.    // Arrow function can make the code simpler    count: state =&gt; ,
    // In order to be able to use `this` to get local state, regular functions must be used    countPlusLocalState (state) {
      return  + 
    }
    //The rest of the calculation functions can be defined  }),
  // Or  // Calculate the function  computed: {
    mapState(['count'])
  }
}

Method 2

<div>{{ $ }}</div>

Concept and use of mutations

concept:

Modify the data in the store, strictly stipulate that the data in the store cannot be modified in other places, and asynchronous operations should not be performed in mutations.

Mutation must be executed synchronously and cannot be executed asynchronously.

use:

Define the method first and then use it

definition

mutations: {
	//Increment custom method store parameters are store data, parameter parameters are received data, no    increment (state, parameter) {
        // Change status        ++
    }
}

use

Method 1 (recommended)

import { mapState, mapMutations } from 'vuex'
//methodmethods: {
	...mapMutations([
	    // Mutations custom method name    	'increment'
    ]),
    love() {
    	// Direct this call ('The data you need to pass, don't do it')        ('Bin')
    }
}

Method 2

methods: {
    love() {
    	// this.$('custom name', 'Passed data, no transfer of data')    	this.$('increment', 'data')
    }
}

Action concept and use

concept:

Used to handle asynchronous operations.

If the data is changed through asynchronous operation, you must pass an action, and you cannot use mutation, but in the action, you still need to indirectly change the data by triggering mutation.

Action is similar to mutation, the difference is:

Action submits mutation, rather than changing the data (status).
Action can contain any asynchronous operation.

definition

mutations: {
	//Increment custom method store parameters are store data, parameter parameters are received data, no    increment (state, parameter) {
        // Change status        ++
    }
},
actions: {
	//add Custom method context is a parameter, you can treat it as an instance of vuex    add(context) {
    	//You can pass ('Methods that need to be called in mutations')    	('increment')
    }
}

use

Method 1 (recommended)

import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions([
      'add', // Map `()` to `this.$('add')`      // `mapActions` also supports payloads:      'add' // Map `(amount)` to `this.$('add', amount)`    ]),
    ...mapActions({
      add: 'add' // Map `()` to `this.$('increment')`    }),
    love() {
    	// Direct this call ('The data you need to pass, don't do it')    	(data)
    }
  }
}

Method 2

methods: {
    love() {
    	// this.$('custom name', 'Passed data, no transfer of data')    	this.$('add', data)
    }
}

Getters concept and use

concept:

getter is used to process the data in the store to form new data. Getting can form new data after processing existing data in the store, similar to the calculation abbreviation of Vue.

definition

state: {
  num: 0
},
getters: {
    doneTodos: state => {
    	return  = 10
    }
}

use

Method 1 (recommended)

&lt;div&gt;{{ doneTodos }}&lt;/div&gt;

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  // Calculate the function  computed: {
  	...mapState(['count']),
  	...mapmapGetters(['doneTodos'])
  }
}

Method 2

<div>{{ $ }}</div>

Summarize

That’s all for this article. I hope it can help you and I hope you can pay more attention to more of my content!