State Management Center Vuex (advanced usage)

1. store->index.js edit getters function

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0,  // 相当于data
    num:1,
  },
  getters: {
    doubleCount(state){
      return 2 * state.count
    }
  },
  mutations: {  // 注意，函数实参为state
    add(state){
      state.count ++
    },
    decrease(state){
      state.count --
    }
  },
  actions: {
    delayAdd(context){ // 主要，函数实参为context
      setTimeout(() => {
        context.commit('add')
      }, 1000);
    }
  },
  modules: {
  }
})

2. In Parent.vue, in computed, edit the doubleCount calculation, and the return value is this.$store.getters.doubleCount

<template>
    <div style="background-color: dodgerblue;">
        <!-- 读取store参数 方法一: $store.state.count -->
        <h3>Parent <span style="color: red;">{
   
   { count }}</span></h3>
        <!-- 读取store参数 方法二: this.$store.state.count 赋值到本地 -->
        <!-- <h5>count: {
   
   { count }}</h5> -->


        <!-- 读取getters中的数 -->
        <h3>getters : {
   
   { doubleCount }}</h3>
        <button @click="add">add</button>
        <button @click="decrease">decrease</button>
        <m-child></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
import { mapMutations, mapState } from 'vuex'
export default {
    // computed: {
    //     // vuex，store中维护的数据，计算给count变量
    //     count() {
    //         return this.$store.state.count
    //     }
    // },

    // computed:mapState({
    //     count:'count'
    // }),

    computed:{
        ...mapState({
            count:'count'
        }),
         
        doubleCount(){
            return this.$store.getters.doubleCount
        }
    },

    data() {
        return {
            msg: 'df'
        }
    },

    methods:{
        ...mapMutations(['add','decrease']),   // 注意这里要用引号把函数名引起来
    },

    components: {
        MChild,
    },
    mounted() {
        console.log(this.$store.state)
    }
}

</script>

<style></style>

Use mapGetters, note that ES6's expansion statement is used here..., and then it must be written in the form of an array, not an object. If the name is changed, it will be written in the form of an object. Different from mapState!

<template>
    <div style="background-color: dodgerblue;">
        <!-- 读取store参数 方法一: $store.state.count -->
        <h3>Parent <span style="color: red;">{
   
   { count }}</span></h3>
        <!-- 读取store参数 方法二: this.$store.state.count 赋值到本地 -->
        <!-- <h5>count: {
   
   { count }}</h5> -->


        <!-- 读取getters中的数 -->
        <h3>getters : {
   
   { doubleCount }}</h3>
        <button @click="add">add</button>
        <button @click="decrease">decrease</button>
        <m-child></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
import { mapMutations, mapState,mapGetters } from 'vuex'
export default {
    // computed: {
    //     // vuex，store中维护的数据，计算给count变量
    //     count() {
    //         return this.$store.state.count
    //     }
    // },

    // computed:mapState({
    //     count:'count'
    // }),

    computed:{
        ...mapState({
            count:'count'
        }),
         
        // doubleCount(){
        //     return this.$store.getters.doubleCount
        // }

        ...mapGetters([
            'doubleCount'
        ])
    },

    data() {
        return {
            msg: 'df'
        }
    },

    methods:{
        ...mapMutations(['add','decrease']),   // 注意这里要用引号把函数名引起来
    },

    components: {
        MChild,
    },
    mounted() {
        console.log(this.$store.state)
    }
}

</script>

<style></style>