How to get VUEX's value

Question

vuex

store/modules/cafes.js

import CafeAPI from "../../apis/cafe.js";

export const cafes = {
  //status = 0 -> 数据尚未加载
  //status = 1 -> 数据开始加载
  //status = 2 -> 数据加载成功
  //status = 3 -> 数据加载失败
  state: {
    cafe: {},
    cafeLoadStatus: 0,
    cafes: [],
    cafesLoadStatus: 0,
    // 添加cafe 的数据状态
    cafeAddStatus: 0,
  },
  actions: {
    //   载入coffe馆列表
    loadCafes({ commit }) {
      commit("setCafesLoadStatus", "1");
      CafeAPI.getCafes()
        .then(function (response) {
          commit("setCafes", response.data);
          commit("setCafesLoadStatus", 2);
        })
        .catch(function () {
          commit("setCafes", []);
          commit("setCafesLoadStatus", 3);
        });
    },
    loadCafe({ commit }, data) {
      commit("setCafeLoadStatus", 1);
      CafeAPI.getCafe(data.id)
        .the(function (response) {
          commit("setCafe", response.data);
          commit("setCafeLoadStatus", 2);
        })
        .catch(function () {
          commit("setCafe", {});
          commit("setCafeLoadStatus", 3);
        });
    },
    addCafe({ commit, dispatch }, data) {
      // 1.提交数据状态
      commit("setCafeAddStatus", 1);
      // 2.调用接口
      CafeAPI.postAddCafe(
        data.name,
        data.address,
        data.city,
        data.state,
        data.zip
      )
        .then(function () {
          commit("setCafeAddStatus", 2);
          dispatch("loadCafes");
        })
        .catch(function () {
          commit("setCafeAddStatus", 3);
        });
    },
  },
  mutations: {
    //   获取cafe店列表
    setCafesLoadStatus(state, status) {
      state.cafesLoadStatus = status;
    },
    setCafes(state, cafes) {
      state.cafes = cafes;
    },
    //获取具体cafe店信息
    setCafeLoadStatus(state, status) {
      state.cafe = status;
    },
    setCafe(state, cafe) {
      state.cafe = cafe;
    },
    setCafeAddStatus(state, status) {
      state.cafeAddStatus = status;
    },
  },
  getters: {
    getCafesLoadStatus(state) {
      return state.cafesLoadStatus;
    },
    getCafes(state) {
      return state.cafes;
    },
    getCafeLoadStatus(state) {
      return state.cafeLoadStatus;
    },
    getCafe(state) {
      return state.cafe;
    },
    getCafeAddStatus(state) {
      return state.cafeAddStatus;
    },
  },
};

store/index.js

import Vue from "vue";
import Vuex from "vuex";
import { cafes } from "./modules/cafes.js";
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    cafes,
  },
});

Use VUEX in the Vue page.

  var data = this.$store.getters;
  console.log("data: ", data);

Print results are as follows.

Then modify the code according to the value of console.log

  var data = this.$store.getters.getCafes.data;
  console.log("data: ", data);

console.log result is undefined. How can I get this.$Store.getters.getcafes.data value? The same code, sometimes you can take the value of this.$Store.getters.getcafes.data, sometimes undefined. this.$Store.getters' value is correct . I am very confused

Answer 1

You can use ...mapGetters , take a look in following snippet with simple vuex with modules:

const cafes = {
  name: 'cafes',
  namespaced: true,
  state: {
    cafe: null,
  },
  getters: {
    getCafe: state => state.cafe,
  },
  actions: {
    loadCafe({ commit }, data) {
      commit("setCafe", data);
    },
  },
  mutations: {
    setCafe(state, cafe) {
      state.cafe = cafe;
    },
  },
};

const store = new Vuex.Store({
  modules: {
    cafes,
  },
});

const app = {
  name: 'app',
  computed: {
    ...Vuex.mapGetters({
      currentCafe: 'cafes/getCafe',
    }),
  },
  methods: {
    ...Vuex.mapActions({
      load: 'cafes/loadCafe',
    }),
  },
  template: `
    <div>
      <div>
        cafe: {{ currentCafe }}
      </div>
      <div>
        <button @click="load('cafe 1')">load cafe</button>
      </div>
    </div>
  `,
}


new Vue({
  el: '#app',
  store,
  render: h => h(app),
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
</div>

Answer 2

Try using the vuex this way:

<script>
    import { mapGetters } from 'vuex'
    export default {
        //importing the getter getCafes
        computed:{
            ...mapGetters('cafes',['getCafes'])
        },
        created(){
            //the getCafes value should be printed here
            //in the html part you can show the value using {{getCafes}}
            console.log(this.getCafes)
        }
    }
</script>