状态管理中心 Vuex (高级用法)

1. store->index.js 编辑getters函数

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. Parent.vue中，在computed中，编辑doubleCount计算，返回值为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>

使用mapGetters, 注意， 这里用ES6的展开语句...，然后要写成数组形式，不是对象，如果换名字了写成对象形式。与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>