博客

vuex中getters其实就是做数据加工的，可看成与computed计算属性一样的功能，即做一些数据的处理加工。

例子：

import gs from "@/service/goods";

export default {
  state: {
    slider: [],
    keys: [],
    goodsInfo: {}
  },
  mutations: {
    setGoodsInfo(state, { slider, keys, goodsInfo }) {
      state.slider = slider;
      state.keys = keys;
      state.goodsInfo = goodsInfo;
    }
  },
  getters: { // 添加一个goods属性，转换对象形式为数组形式便于循环渲染
    goods: state => {
      return state.keys
        .map(key => state.goodsInfo[key])//没有reduce时，得到一个二维数组
        .reduce((prev, next) => prev.concat(next), []);//有了reduce时，得到一个一维数组
    }//map是分离操作，reduce是聚合操作；concat是把两个数组合并成一个
  },
  actions: {
    getGoods({ state, commit }) {
        if (!state.keys.length) {
            // 没有数据采去获取
            gs.getGoodsInfo().then(goodsInfo => {
                commit('setGoodsInfo', goodsInfo)
            })
        }
    }
  }
};