如何獲得VUEX的價值

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;
    },
  },
};

存盤/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,
  },
});

在 Vue 頁面中使用 VueX。

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

列印結果如下。 然后根據console.log的值修改代碼

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

console.log 結果未定義。我怎樣才能獲得this.$Store.getters.getcafes.data 價值？相同的代碼，有時可以取值this.$Store.getters.getcafes.data，有時未定義。this.$Store.getters 的值是正確的。我很迷茫

uj5u.com熱心網友回復：

嘗試以這種方式使用 vuex：

<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>

uj5u.com熱心網友回復：

您可以使用...mapGetters，看看下面的帶有模塊的簡單 vuex 代碼段：

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>

標籤：

上一篇：在Vuejs中獲取父元素的寬度

下一篇：如何讓rust代碼使用本地使用命令