1. Build a framework

npm install vuex --save/ / NPM download
/ / into the vue
import Vue from "vue"
/ / introduce vuex
import Vuex from "vuex"
/ / register vuex
Vue.use(Vuex);
//vuex instantiate -- new
const store = new Vuex({
  // Core configuration
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions: {}})/ / export vuex
export default store;
/ / the main js calls
import store from "./store"
const vm = new Vue({
    store:store,
    render: h= > h(App)
}).$mount('#app')
Copy the code

Use Vuex

// Call mode -- global use
{{$store.stste.count}}
// local call
this.$store.state.count;
// Call the mutations method globallyButton click event @click=$store.mit (' method name ')"
// local call
this.$store.com MIT (' method name ')// Pass parameters == Commit loads
// Action submitted the mutations method
add(context,n){// Context corresponds to an object
  context.commit("Method name",n)
},
add2({commit},n){// Context is a structurally assigned object {commit,state}
	//commit(" method name ",n)
   return new Promise((resolve.reject) = >{
     commit("Method name",n)
     resolve("123")})// Perform asynchronous operations with Promise
}, 
// The muations method is triggered by methods defined by actions to indirectly change the state data
// Async operation in actions, how to call in group
  
// Call the mutations method globallyButton click event @click="$store.dispatch("The method name), "load"
// local call
this.$store.dispatch("Method name", load) ==> pass parametersthis.$store.dispatch("Method name"The load). Then (response= >{
  console.log(response)
})

/ / modularnewmoduleFolder -- count.jsconst state ={  
  // Set separate module state, getters, mutations, actions, modules in the folder
}
const mutations = {
  add(){    
  }
}
export default { // Export the configured module
  state,
  mutations
}
--shop.js

// Import and mount in store.js
import count from "./modules/count"
import shop from "./modules/shop"
const store = new Vuex.Store({
  modules:{
    count,
    shop
  }
})
Copy the code

Batch Vuex properties in components

Use the mapState helper function, using the object expansion operator

import {mapState} from 'vuex'
export default{
    computed: {... mapState(['price'.'number']); . mapGetters(['total'.'discountTotal'}, methods:{... mapActions({setNumber:'SET_NUMBER',}}}Copy the code

4. Action and mutation are different in Vuex

  • The action commits mutation rather than a direct state change. Mutation can change the state directly.

  • Actions can contain any asynchronous operation. Mutation can only be a synchronous operation.

  • The action is submitted with this.$store.dispatch(‘ACTION_NAME’,data). Mutation is committed using this. codestore.mit (‘SET_NUMBER’,10).

  • The mutation first parameter is state, and the action first parameter is context, which contains the following parameters

    {state, // equivalent to 'store.state' or local state rootState in modules, // equivalent to 'store.state', Commit, // equivalent to 'store.mit' dispatch, // equivalent to 'store.dispatch' getters, // Equivalent to 'store.getters' rootGetters // Equivalent to' store.getters', only exists in modules}Copy the code