What is vuex
Vuex is a state management model developed for VUE that centrally manages the state of all components with rules to ensure that changes occur in a predictable manner.Copy the code
Vuex application scenarios

1. Multiple views depend on the same state. Behavior from different views needs to change the same state.

The use of Vuex

Install CNPM I vuex –save

Use import Vue from 'Vue' import Vuex from 'Vuex' vue. use(Vuex) const store = new Vuex.Store({state: {}, mutations: {}, actions:{}}) export default store const VM = new Vue({store, render: H => h(App),}).$mount('# App ') {$store} Because import will be executed in advance by default, regardless of the orderCopy the code
state
Const state = {sum: 0, age: 99 /* Store data */} Access this.$store.stateCopy the code
getters
Const getters = {bigSum(state){return state.sum * 10} /* Similar to the calculation property in Vue, When there are a lot of places to use the post-processing state can be applied to getters */} by accessing this.$store.getters.bignumCopy the code
actions
const actions = { increment(context, params) { context.commit('increment', Params) /* Actions is where you asynchronously fetch and process logic in order to process submitted arguments. Context is a simplified version of store that provides dispatch when there's too much logical code, redispatch it to improve the cohesion of the code, $increment. dispatch(' increment. dispatch ',1)Copy the code
mutations
const mutations = { increment(state, Sum += params} /* When data changes in mutations,vue developer tools can track in detail, when user behavior can transfer parameters and there is no logical process Commit directly without dispatch, and the changed state is data responsive. */} Access this.com MIT ('increment', params)Copy the code
modules
Const moduleA = {namespaced: vuex = {namespaced; */ mutations: () => ({count: 10}), mutations: Console. log(' I executed, namespace ') state.count++}}, getters: increment(state) {console.log(' I executed, namespace ') state.count++}}, getters: { doubleCount(state) { return state.count * 2 } } } modules: { a: Use this. Code.store.com MIT (' A /increment') This.increment () /* Add a prefix for actions, getters, mutations */ mapMutations('a',['increment']) ... mapMutations('a',{'increment':'increment'})Copy the code
Auxiliary function
MapState mapGetters, mapActions, mapMutations mapState is used for the auxiliary function of the state, the incoming configuration items can be divided into an array and object two forms The return value is computed Object form: MapState ({/* function form, available to this */ sum(state){return state.sum}, /* arrow function form */ age: state => state.age /* key pair form, will be mapped to age: State => state. Age 'age'}) array form mapGetters, mapActions, mapMutations and similar generally recommended the use of the mapState array configuration items / / computed: mapState ([' sum ']), Methods :{add(){this.$store. Dispatch ('increment',1)},... mapActions(['increment']), ... mapMutations(['increment']) },Copy the code