vuex中的mapGetters、mapActions、mapState辅助函数的使用（映射getters、actions、state）

一、mapGetters映射关系

getters.js文件

//getters.js
export default {
  cartLength(state) {
    return state.cartList.length;
  },
  cartList(state) {
    return state.cartList;
  },
};

vue组件使用
mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性

1. 第一种使用方法：数组（不能改名字）

<template>
  <div class="car">
    <div>{{cartLength}}</div>
  </div>
</template>

<script>
//mapGetters是一个函数，这个函数返回一个数组
import { mapGetters } from "vuex";
export default {
  name: "car",
  data() {
    return {};
  },
  computed: {
    //第一种方法：数组方法 
    ...mapGetters(["cartLength"])
  },
};
</script>

2. 第二种使用方法：对象（可以改名字）

<template>
  <div class="car">
   <div>{{length}}</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "car",
  data() {
    return {};
  },
  computed: {
    //第二种方法：对象方法
    ...mapGetters({
      length: "cartLength",
      list: "cartList"
    })
  },
};
</script>

二、mapActions映射关系

actions.js

 import { ADD_COUNT, ADD_TO_CART } from "./mutations-types";

export default {
  addCart(context, payload) {
    return new Promise((res, rej) => {
      let oldProduct = context.state.cartList.find(item => {
        return item.iid === payload.iid;
      });
      if (oldProduct) {
        context.commit(ADD_COUNT, oldProduct);
        res("当前商品数量+1");
      } else {
        payload.count = 1;
        context.commit(ADD_TO_CART, payload);
        res("添加了新的商品");
      }
    });
  }
};

vue组件

import { mapGetters } from "vuex";

//注意这里是放在methods里面
  methods:{
    ...mapActions(["addCart"])
  },
     clickCart() {
      const cart = {};
      cart.img = this.topImg[0];
      cart.title = this.goods.title;
      cart.desc = this.goods.desc;
      cart.price = this.goods.realPrice;
      cart.iid = this.iid;
      this.addCart(cart).then(res => console.log(res));
//上面的代码恒等于this.$store.dispatch("addCart",cart).then(res => console.log(res));
    }

三、mapState映射关系

import Vue from "vue"
import Vuex from "vuex"
import mutations from "./mutations.js"
import actions from "./actions.js"
import getters from "./getters.js"

Vue.use(Vuex)

const state={
    userInfo:{},//用户信息
    dorm:"请绑定宿舍"//用户宿舍
  }

const store=new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules:{}
})

export default store

https://www.cnblogs.com/qiu-Ann/p/11347863.html

1.数组方法

import {mapState} from "vuex"

export default {
  name: 'info',
  computed: {
    ...mapState(['dorm'])
  },
}

2.对象方法

import {mapState} from "vuex"

computed: {
...mapState({
count: 'count', // 第一种写法
sex: (state) => state.sex, // 第二种写法，可以用于对象解构
from: function (state) { // 用普通函数this指向vue实例,要注意
return this.str + ':' + state.from
},
// 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
// from: (state) => this.str + ':' + state.from
myCmpted: function () {
// 这里不需要state,测试一下computed的原有用法
return '测试' + this.str
}
})
}

四、mapMutations 印射关系

    methods: {
        ...mapMutations(["addCounter"]),
        btnClick() {
            this.addCounter({ mount: 1 });
        }
    }

https://www.cnblogs.com/chris-oil/p/10891013.html