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