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

store/index.displaces

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정의되지 않은 경우도 있습니다.이.$Store.getters의 값이 맞습니다.매우 혼란스럽습니다.

사용할 수 있습니다....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>

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>

언급URL : https://stackoverflow.com/questions/70742600/how-to-get-vuexs-value