Vuex uses detailed

This article will vuexuse to do a detailed explanation, such as the need for further research to see Vuex official website

What Vuex that?

The official explanation : Vuexa specialized Vueapplication development state management model, which uses the assembly so that the state of centralized storage management application, and a corresponding state rules to ensure a predictable manner changed.
VuexIs a centralized state management framework, conducting frequent, large-scale projects between the complex components of traditional values, it is very suitable for use Vuexto make state management. If you do not do large-scale single-page references, use Vuexit appears redundant.

Vuex work flow chart

VuexDesigned to meet the one-way data flow principle, avoid modifying the parent component sub-assemblies of the state leads to traffic chaos. As can be seen by FIG view view component-> by dispatchdistributing actions-> by committriggering mutationsmethod -> to modify state-> update the view view component,

note:

• VuexIs in a state responsive to ( statecan be updated view, viewit can also be modified state)
• Data flow is unidirectional
• VuexThe only way to modify stateonlymutations
• In actionscan be distributed mutations, and can be asynchronous tasks

State

VuexUsing a single state tree, use an object contains all of the application-level status. At this point it will exist as a single state source. This also means that each application will only contain one storeinstance.
stateContains storethe state data so

const store = new Vuex.Store({
  state:{
  	 count:100,
	 list:[
	    {
	      id:1,
	      name:'name1'
	    },
	    {
	      id:1,
	      name:'name2'
	    }
  	]
  },
});

Getters

Similarly Vuecalculated properties, from the statereturned query data processing

const getters = {
  countComputed(state){
    return state.count+'user'
  }
}

Mutation

Change Vuexthe storeonly way the state is submitted mutation, similar to Vuethe methodsonly task synchronization

const mutations = {
// mutationTypes是mutation事件类似的常量表示
  [mutationTypes.INCREMENT](state,n=1){
    state.count += n
  }
}

Action

ActionSimilar mutation, but actionsubmitted that mutation, rather than directly change the state actioncan do asynchronous operation

const actions = {
  incrementAction(ctx,{n}){
    ctx.commit(mutationTypes.INCREMENT, n)
  },
  demo(ctx){
    setTimeout(() => {
      // 提交mutation
    }, 1000);
  }
}

Module

Due to the use of a single state tree, the status of all applications will be concentrated in a relatively large objects. When the application becomes very complicated, storeit is possible to become quite bloated. In order to solve these problems, Vuexallowing us to be storedivided into modules, each module has its own state, mutation, action, getter,
carrying out large-scale projects, sub-module, making the project easier to maintain and manage, but also facilitate the development of teamwork
will be used herein in the form of modules do a comprehensive example

Directory files

Vuex entry file index.js

The index.jsintroduction of each module, this file as Vuexan entry file

import Vue from 'vue'
import Vuex from 'vuex'
import userStore from './user'
import productStore from './product'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    userStore,
    productStore
  }
})

user.js module

Module 1: user module. Use mutationTypes, the name of the method to make a unified management and reduce errors.

import * as mutationTypes from './mutation-types'
const state = {
  count:100
}
const getters = {
  countComputed(state){
    return state.count+'user'
  }
}
const mutations = {
  [mutationTypes.INCREMENT](state,n=1){
    state.count += n
  }
}
const actions = {
  incrementAction(ctx,{n}){
    ctx.commit(mutationTypes.INCREMENT, n)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

product.js module

import * as mutationTypes from './mutation-types'
const state = {
  count:1
}
const getters = {
  countComputed(state){
    return state.count+'product'
  }
}
const mutations = {
  [mutationTypes.INCREMENT](state,n=1){
    state.count += n
  }
}
const actions = {
  incrementAction(ctx,{n}){
    ctx.commit(mutationTypes.INCREMENT,n)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

mutation-types

export const INCREMENT = 'increment'

App.vue assembly inlet

<template>
  <div>
      {{ userCount }}
      {{ productCount }}
      <!-- {{ userGetterCount }} -->
      <!-- {{ productGetterCount }} -->
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions,mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState({
      userCount: state => state.userStore.count,
      productCount: state => state.productStore.count
    }),
    ...mapGetters({
      userGetterCount: 'userStore/countComputed',
      productGetterCount: 'productStore/countComputed'
    })
  },
  methods: {
    ...mapActions({
      userIncrement: 'userStore/incrementAction',
      productIncrement: 'productStore/incrementAction'
    }),
    ...mapMutations({
      userIncrementMu: 'userStore/increment',
      productIncrementMu: 'productStore/increment'
    })
  },
  mounted() {
    // this.userIncrement({n:-10})
    // this.productIncrement({n:1000})
    this.userIncrementMu(-10)
    this.productIncrementMu(1000)
  }
}
</script>