Vuex的辅助函数mapState, mapActions, mapGetters,mapMutations用法代码例子

参考资料

1. https://www.cnblogs.com/tugenhua0707/p/9794423.html
   2.https://vuex.vuejs.org/zh/api/#组件绑定的辅助函数

调用函数的文件

<template>
  <div class="hello">
    <button @click="getMyInfo">commit</button>
    <button @click="getMyInfo2">getters</button>
    <button @click="getMyInfo3">mapState</button>
    <button @click="getMyInfo4">mapActions</button>
    <button @click="getMyInfo5">mapGetters</button>
    <button @click="getMyInfo6">mapMutations</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  mounted() {},
  computed: {
    //获取store里面的state值到本地
    ...mapState({
      num: state => state.person.num,
      type: state => state.person.type,
      from: state => state.person.from,
      name: state => state.car.name,
      age: state => state.car.age
    }),
    //获取store中的getter值
    ...mapGetters({
      num2: "num",
      type2: "type"
    })
  },
  methods: {
    //获取store中actions的方法
    ...mapActions(["getMyInfo2"]),
     //获取store中mutations的方法
    ...mapMutations(["getMyInfo"]),

    //上述使用辅助函数拿到的值或者方法都可以使用 this.value或this.fun()调用
    getMyInfo() {
      this.$store.commit({
        type: "getMyInfo"
      });
    },
    getMyInfo2() {
      let getters = this.$store.getters;
      for (let item in getters) {
        console.log(item);
      }
    },
    getMyInfo3() {
      console.log("打印获取mapState值");
      console.log(this.num);
      console.log(this.type);
      console.log(this.from);
      console.log(this.name);
      console.log(this.age);
    },
    getMyInfo4() {
      console.log("打印获取mapActions函数结果值");
      this.getMyInfo2();
    },
    getMyInfo5() {
      console.log("打印获取mapGetters函数结果值");
      console.log(this.num2);
      console.log(this.type2);
    },
    getMyInfo6() {
      console.log("打印获取mapMutations函数结果值");
      this.getMyInfo();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

store/index.js文件

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

import person from './modules/person'
import car from './modules/car'
import getters from './getters'


Vue.use(Vuex)
console.log("vuex插件已完成安装")

export default new Vuex.Store({

    modules: {
        person,
        car
    },
    state: {

    },
    mutations: {

    },
    actions: {

    },
    getters
})

store/getter.js

const getters = {
    num: state => state.person.num,
    type: state => state.person.type,
    from: state => state.person.from,
    name: state => state.car.name,
    age: state => state.car.age
}
export default getters

store/modules/car.js

const car = {

    state: {
        name: 'zxy',
        age: 12,

    },
    mutations: {
        getMyInfo(state) {
            for (let key in state) {
                console.log(key)
            }
        }
    },
    actions: {
        getMyInfo2({ commit }) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('getMyInfo')
                }, 1000)
            })
        }
    }

}

export default car;

store/modules/person.js

import { reject } from "q";


const person = {

    state: {
        num: 10,
        type: "轿车",
        from: "china",
    },
    mutations: {
        getMyInfo(state) {
            for (let key in state) {
                console.log(key)
            }
        }
    },
    actions: {
        getMyInfo2({ commit }) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('getMyInfo')
                    resolve()
                }, 1000)
            })

        }
    }

}

export default person;