Same State management

In VUEX, there are five basic personal understandings of objects by default:

  1. State (initialize data)
  2. Getter (output to external data)
  3. Mutation (method defined)
  4. Action (Output to external methods)
  5. Module (each JS file can contain four items of State getter action for unified management)

Download NPM install vuex –save The following use is only preliminary use, if you need to package can be packaged again

1. Create a store.js file
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    nuamber:0
}
const store=new Vuex.Store({
    state
})
export default store
Copy the code
2. Import it in the main. js file
import store from 'xxx' // create a new file for 1
在new Vue({
    store   // Add the one referenced above
})
Copy the code
3. Use it in. Vue files
created:function(){
	console.log(this.$store.state.number) //this.$store.state.number = 0
}
Copy the code
4. Use with getters to return to 1
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    nuamber:0
}
const getters={
    newNumber(){// the name of aaNumber is optional
        return state.number
    }
}
const store=new Vuex.Store({
    state,
    getters
})
export default store
Copy the code
5. In. Vue, obtain data through getters
created:function(){
	console.log(this.$store.getters.newNumber) //this.$store. Getters
}
Copy the code
6. Cooperate with mutations, add click events and change state back to 4
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    nuamber:0
}
const mutations={
    aaNumber(state){// the name of aaNumber is optional
        state.number++
    }
}
const getters={
    newNumber(){// the name of aaNumber is optional
        return state.number
    }
}
const store=new Vuex.Store({
    state,
    getters,
    mutations
})
export default store
Copy the code
7. Change the data via mutations under the. Vue file
<template>
  <div id='app'>
  	<button @click="a">Click on the</button>// Each click will change the following data accumulation<div>{{this.store.getters.newNumber}}</div>
  </div>
</template>
<script>
export default{
  methods: {a(){
          this.$store.commit('aaNumber')}}}</script>
Copy the code
8. Use mapMutations
<template>
  <div id='app'>
  	<button @click="a">Click on the</button>// Each click will change the following data accumulation<div>{{this.store.getters.newNumber}}</div>
  </div>
</template>
<script>
import {mapMutations} from 'vuex'
export default{
  methods: {... mapMutations(['aaNumber'])
      a(){
          this.aaNumber()
      }
  }
}
</script>
Copy the code
9. Actions Asynchronous requests
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    nuamber:0
}
const mutations={
    aaNumber(state){// the name of aaNumber is optional
        state.number++
    }
}
const actions={
    aaNumberchange(context){// the method that triggers the mutation function. Context and store have the same methods and attributes
        context.commit('aaNumber')}}const getters={
    newNumber(){// the name of aaNumber is optional
        return state.number
    }
}
const store=new Vuex.Store({
    state,
    getters,
    mutations
})
export default store
Copy the code
10. Actions Change data
<template>
  <div id='app'>
  	<button @click="a">Click on the</button>// Each click will change the following data accumulation<div>{{this.store.getters.newNumber}}</div>
  </div>
</template>
<script>
export default{
  methods: {a(){
         this.$store.dispatch('aaNumberchange')}}}</script>
Copy the code
11.modules
In real use, there is not only one store, but basically separate methods. Here we are making a decrement mainly to separate two files. Create an add.js file and a reduce.js file. Add state, mutations, actions, and getters from store.js to add.js as shown in the reduce.js file, only change ++ to —
//add.js
const state={
    nuamber:0
}
const mutations={
    aaNumber(state){// the name of aaNumber is optional
        state.number++
    }
}
const actions={
    aaNumberchange(context){// the method that triggers the mutation function. Context and store have the same methods and attributes
        context.commit('aaNumber')}}const getters={
    newNumber(){// the name of aaNumber is optional
        return state.number
    }
}
export default {
	 namespaced: true, state,mutations,actions ,getters
}
Copy the code
//reduce.js
const state={
    nuamber:0
}
const mutations={
    aaNumber(state){// the name of aaNumber is optional
        state.number--
    }
}
const actions={
    aaNumberchange(context){// the method that triggers the mutation function. Context and store have the same methods and attributes
        context.commit('aaNumber')}}const getters={
    newNumber(){// the name of aaNumber is optional
        return state.number
    }
}
export default {
	 namespaced: true, state,mutations,actions ,getters
}
Copy the code
12 Import the file in the store.js file
import Vue from 'vue'
import Vuex from 'vuex'
import aa from 'xx'  // Add.js corresponds to the file path
import bb from 'xx'  //reduce.js corresponds to the file path
Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
      aa,
      bb 
    }
})
Copy the code
13. Use in.vue files, and you can use mapState to get values
<template>
  <div id='app'>
  	<button @click="a">Click on the</button>// Each click will change the following data accumulation<div>{{dataA}}</div>// Add data<div>{{dataB}}</div>// Decrement data<button @click="b">Click on the</button>// Each click will change the following data continuously decreasing</div>
</template>
<script>
 import {mapState}  from 'vuex'
export default{ computed({ ... mapState({dataA(state){
      			return state.aa.number // Add data
  			},
    		dataB(state){
      			return state.aa.number // Decrement data
  			},
           // Or data:state=>state.aa.number Number of ES6 data})})methods: {a(){
         this.$store.dispatch('aa/aaNumberchange') //aa indicates 12 modules
      },
      b(){
         this.$store.dispatch('bb/aaNumberchange') / / bb}}}</script>
Copy the code
14. Use mapGetters to get the value in the getter mode
<template>
  <div id='app'>
  	<button @click="a">Click on the</button>// Each click will change the following data accumulation<div>{{dataA}}</div>// Add data<div>{{dataB}}</div>// Decrement data<button @click="b">Click on the</button>// Each click will change the following data continuously decreasing</div>
</template>
<script>
 import {mapGetters}  from 'vuex'
export default{ computed({ ... mapGetters({dataA:'aa/newNumber'.dataB:'bb/newNumber'})})methods: {a(){
         this.$store.dispatch('aa/aaNumberchange') //aa indicates 12 modules
      },
      b(){
         this.$store.dispatch('bb/aaNumberchange') / / bb}}}</script>
Copy the code
15. MapActions instead of this. $store. Dispatch ()
<template>
  <div id='app'>
  	<button @click="a">Click on the</button>// Each click will change the following data accumulation<div>{{dataA}}</div>// Add data<div>{{dataB}}</div>// Decrement data<button @click="b">Click on the</button>// Each click will change the following data continuously decreasing</div>
</template>
<script>
 import {mapGetters,mapActions}  from 'vuex'
export default{ computed({ ... mapGetters({dataA:'aa/newNumber'.dataB:'bb/newNumber'})})methods: {... mapActions({a:'aa/aaNumberchange'}, {b:'bb/aaNumberchange'})  //a and b are methods}}</script>
Copy the code