Installation:

npm install --save vuex

Introduce

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

Introduction of several parameters of vuex

State Stores Initial Data

Getters. Processing secondary processing of data in a State (filtering data like filters) such as returning an object from a State, we want to extract the value of a key in the object using this method

Mutations ('mutation Name') triggers the Mutations method to change the value of state when it is posted on a page (similar to computed).

Actions. Processing the methods already written in Mutations is triggered directly by this. $store. dispatch (action Name)

Let's not rush to learn more. Print Vuex first.

console.log(Vuex) //Vuex Contains for an object

Vuex ={
    Store:function Store(){},    
    mapActions:function(){},    // Corresponding Actions Result set
    mapGetters:function(){},    //Corresponding Getters Result set
    mapMutations:function(){},  //Corresponding Mutations Result set
    mapState:function(){},      //Corresponding State Result set
    install:function install(){}, //No explanation for the time being installed:true //No explanation for the time being
 }


//If we only need the State inside, we can write like this.
import { mapState } from 'vuex';

import { mapGetters, mapMutations } from 'vuex'; //Use this approach if multiple references are required

Looking at the above content again and again, is it clear that we are going to give examples and describe them in official language?

State

State is responsible for storing the state data of the whole application. Generally, it needs to inject store object into the node when it is used. Later, it can use this.$store.state to get the state directly.

//store is generated for instantiation
import store from './store' 

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

This store can be understood as a container containing the state of the application and so on. The process of instantiating the store generation is as follows:uuuuuuuuuuu

const mutations = {...};
const actions = {...};
const state = {...};

Vuex.Store({
  state,
  actions,
  mutation
});

In the subsequent process of using components, if you want to get the corresponding state, you can use this.$store.state directly. Of course, you can also use the mapState auxiliary function provided by vuex to map state to the computational properties, such as

import {mapState} from 'vuex'

export default {
  computed: mapState({
    count: state => state.count
  })
}

Getters

Some states need to be processed twice to use getters. Access the derived state through this.$store.getters.valueName. Or it can be mapped directly to local computational attributes using the auxiliary function map Getters.

const getters = {
  strLength: state => state.aString.length
}

Use in components

import {mapGetters} from 'vuex'

export default {
computed: mapGetters([
'strLength'
])
}

Mutations

Mutations, which means "change" in Chinese, can change state, essentially a function used to process data, which receives the unique parameter state. Store. commit (mutation Name) is a method used to trigger a mutation. It is important to remember that mutations defined must be synchronized functions, otherwise the data in devtool may be problematic, making state changes difficult to track.

const mutations = {
  mutationName(state) {
    //Change here state Data in
  }
}

Triggered in the component:

export default {
  methods: {
    handleClick() {
      this.$store.commit('mutationName')
    }
  }
}

Or use auxiliary function map Mutations to map trigger functions directly to methods, so that they can be used directly in element event binding. Such as:

import {mapMutations} from 'vuex'

export default {
  methods: mapMutations([
    'mutationName'
  ])
}

Actions

Actions can also be used to change state, but by triggering mutation s, it is important to include asynchronous operations. Its auxiliary function is mapActions, similar to mapMutations, which are also bound to component methods. If you choose to trigger directly, use this.$store.dispatch(actionName) method.

//Definition Actions
const actions = {
  actionName({ commit }) {
    //dosomething
    commit('mutationName')
  }
}

Use in components

import {mapActions} from 'vuex'

//I am a component
export default {
  methods: mapActions([
    'actionName',
  ])
}