Vuex summation cases and mapstate, mapmutations, mapgetters

main.js

import Vue from 'vue'
import App from './App.vue'
//Introduce vuex
import Vuex from 'vuex'
//Introduce store
import store from './store/index'

Vue.config.productionTip = false



newVue({
    el:"#app",
    render: h => h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

App.vue

<template>
<div class="container">
<Count/>
</div>
</template>

<script>
import Count from './components/Count'
export default {
name:'App',
components:{Count},
mounted(){
console.log('App',this)
}
}
</script>

count.vue

<template>
<div>
<h1>The current sum is: {<!-- -->{$store.state.sum}}</h1>
<h3>The current sum is amplified 10 times; {<!-- -->{$store.getters.bigSum}}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment"> + </button>
<button @click="decrement">-</button>
<button @click="incrementOdd">The current sum is odd and plus it</button>
<button @click="incrementWait">Wait and add again</button>
</div>
</template>

<script>
export default {
name:'Count',
data() {
return {
n:1, //The number selected by the user
\t\t\t\t
}
},
methods: {
increment(){
this.$store.dispatch('jia',this.n)
},
decrement(){
this.$store.dispatch('jian',this.n)
},
incrementOdd(){
this.$store.dispatch('jiaOdd',this.n)
},
incrementWait(){
this.$store.dispatch('jiaWait',this.n)
},
},
mounted(){
console.log('Count',this.$store)
}
}
</script>

<style>
button{
margin-left: 5px;
}
</style>

store/index.js

//This file is used to create the most core store in VUex

import Vue from 'vue'

//Introduce Vuex
import Vuex from 'vuex'
//Apply vuex plug-in
Vue.use(Vuex)

//Prepare actions - used to respond to actions in components
const actions ={
    jia(context,value){
        console.log('jia in actions was called')
        context.commit('JIA',value)
    },
    jian(context,value){
        console.log('jian in actions was called')
        context.commit('JIAN',value)
    },
    jiaOdd(context,value){
        console.log('jiaOdd in actions was called')
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('jiaWait in actions was called')
        setTimeout(() => {
            context.commit('JIA',value)
        }, 500);
    }
}

//Prepare mutations - used to operate data (state)
const mutations={
    JIA(state,value){
        console.log('JIA in mutations was called')
        state.sum + =value
    },
    JIAN(state,value){
        console.log('JIAN in mutations was called')
        state.sum -=value
    },
}

//Prepare state - used to store data
const state ={
    sum:0 //Current sum
}

//Prepare getters--used to process the data in the state
const getters={
    bigSum(state){
        return state.sum*10
    }
}


//Create and expose store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

getters configuration items

When a part of the data undergoes some changes, a part of the data can be changed through the attributes of getters.

mapState, mapGetters

// sum(){
// return this.$store.state.sum
// },
//school(){
// return this.$store.state.school
// },
// subject(){
// return this.$store.state.subject
// },
// bigSum(){
// return this.$store.getters.bigSum
// },

//Use mapState to generate calculated properties and read data from state (object writing method)
// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})

//Use mapState to generate calculated properties and read data from state (array writing method)
...mapState(['sum','school','subject']),

...mapGetters(['bigSum'])

Changed via computed properties.

mapMutations

Under the methods method

 // increment(){
// this.$store.commit('JIA',this.n)
// },
//decrement(){
// this.$store.commit('JIAN',this.n)
// },


//Use mapMutations to generate the corresponding method, which will call commit to contact mutations.
...mapMutations({increment:'JIA',decrement:'JIAN'}),

The entire code after using

main.js and App.vue remain unchanged

index.js

//This file is used to create the most core store in VUex

import Vue from 'vue'

//Introduce Vuex
import Vuex from 'vuex'
//Apply vuex plug-in
Vue.use(Vuex)

//Prepare actions - used to respond to actions in components
const actions ={
    jia(context,value){
        console.log('jia in actions was called')
        context.commit('JIA',value)
    },
    jian(context,value){
        console.log('jian in actions was called')
        context.commit('JIAN',value)
    },
    jiaOdd(context,value){
        console.log('jiaOdd in actions was called')
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('jiaWait in actions was called')
        setTimeout(() => {
            context.commit('JIA',value)
        }, 500);
    }
}

//Prepare mutations - used to operate data (state)
const mutations={
    JIA(state,value){
        console.log('JIA in mutations was called')
        state.sum + =value
    },
    JIAN(state,value){
        console.log('JIAN in mutations is called')
        state.sum -=value
    }
   
}

//Prepare state - used to store data
const state ={
    sum:0, //current sum
    school:'Silicon Valley',
    subject:'front-end'
}

const getters={
    bigSum(state){
        return state.sum*10
    }
}


//Create and expose store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

count.vue

<template>
<div>
<h1>The current sum is: {<!-- -->{sum}}</h1>
<h3>The current sum amplified 10 times is: {<!-- -->{bigSum}}</h3>
<h3>I study {<!-- -->{subject}} at {<!-- -->{school}}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment(n)"> + </button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">The current sum is odd and plus it</button>
<button @click="incrementWait(n)">Wait and then add</button>
</div>
</template>

<script>
    import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'
export default {
name:'Count',
data() {
return {
n:1, //The number selected by the user
\t\t\t\t
}
},
computed:{
//sum(){
// return this.$store.state.sum
// },
//school(){
// return this.$store.state.school
// },
// subject(){
// return this.$store.state.subject
// },
// bigSum(){
// return this.$store.getters.bigSum
// },

//Use mapState to generate calculated properties and read data from state (object writing method)
// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})

//Use mapState to generate calculated properties and read data from state (array writing method)
...mapState(['sum','school','subject']),

...mapGetters(['bigSum'])



},
methods: {
// increment(){
// this.$store.commit('JIA',this.n)
// },
//decrement(){
// this.$store.commit('JIAN',this.n)
// },


//Use mapMutations to generate the corresponding method. In the method, commit will be called to contact mutations.
...mapMutations({increment:'JIA',decrement:'JIAN'}),


// incrementOdd(){
// this.$store.dispatch('jiaOdd',this.n)
// },
// incrementWait(){
// this.$store.dispatch('jiaWait',this.n)
// },

//
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

},
mounted(){
const x =mapState({he:'sum',xuexiao:'school',xueke:'subject'})
console.log(x)
}
}
</script>

<style>
button{
margin-left: 5px;
}
</style>

Multiple components share data

That is, the properties in index.js are used as buses. To achieve sharing between data by calling its attributes

index.js (This area mainly adds methods for adding people, at mutations)

//This file is used to create the most core store in VUex

import Vue from 'vue'

//Introduce Vuex
import Vuex from 'vuex'
//Apply vuex plug-in
Vue.use(Vuex)

//Prepare actions - used to respond to actions in components
const actions ={
    jia(context,value){
        console.log('jia in actions was called')
        context.commit('JIA',value)
    },
    jian(context,value){
        console.log('jian in actions was called')
        context.commit('JIAN',value)
    },
    jiaOdd(context,value){
        console.log('jiaOdd in actions was called')
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('jiaWait in actions was called')
        setTimeout(() => {
            context.commit('JIA',value)
        }, 500);
    }
}

//Prepare mutations - used to operate data (state)
const mutations={
    JIA(state,value){
        console.log('JIA in mutations was called')
        state.sum + =value
    },
    JIAN(state,value){
        console.log('JIAN in mutations is called')
        state.sum -=value
    },
    ADD_PERSON(state,value){
        console.log('ADD_PERSON in mutations is called')
        state.personList.unshift(value)
    }
   
}

//Prepare state - used to store data
const state ={
    sum:0, //current sum
    school:'Silicon Valley',
    subject:'front-end',
    personList:[
        {id:'001',name:'Zhang San'}
    ]
}

const getters={
    bigSum(state){
        return state.sum*10
    }
}


//Create and expose store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

Person.vue

<template>
  <div>
    <h1>Personnel list</h1>
    <h3 style="color:blue">The sum of the components above is {<!-- -->{sum}}</h3>
    <input type="text" placeholder="Please enter your name" v-model="name">
    <button @click="add">Add</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{<!-- -->{p.name}}</li>
        
    </ul>
        
  </div>
</template>

<script>
import { nanoid } from 'nanoid'

export default {
    name:'Person',
    data(){
        return{
            name:''
        }
    },
    computed:{
        personList(){
            return this.$store.state.personList
        },
        sum(){
            return this.$store.state.sum
        }
    },
    methods:{
        add(){
            const personObj={id:nanoid(),name:this.name}
            this.$store.commit('ADD_PERSON',personObj)
            this.name=''
            
        }
    }
}
</script>

count.vue (here I mainly add the personList I want to get in the mapstate attribute, and then display it in the display)

<template>
<div>
<h1>The current sum is: {<!-- -->{sum}}</h1>
<h3>The current sum amplified 10 times is: {<!-- -->{bigSum}}</h3>
<h3>I study {<!-- -->{subject}} at {<!-- -->{school}}</h3>
<h3 style="color:red">The total number of people in the component below is: {<!-- -->{personList.length}}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment(n)"> + </button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">The current sum is odd and plus it</button>
<button @click="incrementWait(n)">Wait and then add</button>
</div>
</template>

<script>
    import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'
export default {
name:'Count',
data() {
return {
n:1, //The number selected by the user
\t\t\t\t
}
},
computed:{
//sum(){
// return this.$store.state.sum
// },
//school(){
// return this.$store.state.school
// },
// subject(){
// return this.$store.state.subject
// },
// bigSum(){
// return this.$store.getters.bigSum
// },

//Use mapState to generate calculated properties and read data from state (object writing method)
// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})

//Use mapState to generate calculated properties and read data from state (array writing method)
...mapState(['sum','school','subject','personList']),

...mapGetters(['bigSum'])



},
methods: {
// increment(){
// this.$store.commit('JIA',this.n)
// },
//decrement(){
// this.$store.commit('JIAN',this.n)
// },


//Use mapMutations to generate the corresponding method, which will call commit to contact mutations.
...mapMutations({increment:'JIA',decrement:'JIAN'}),


// incrementOdd(){
// this.$store.dispatch('jiaOdd',this.n)
// },
// incrementWait(){
// this.$store.dispatch('jiaWait',this.n)
// },

//
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

},
mounted(){
const x =mapState({he:'sum',xuexiao:'school',xueke:'subject'})
console.log(x)
}
}
</script>

<style>
button{
margin-left: 5px;
}
</style>