vuex 中的生命周期问题

• Z时代
• 2024-02-13
• 分类：IT

最近在学习vuex中遇到下面的一个问题, 具体情况如下:
vuex内容部分
目录结构如下:
store
|--modules

|--cafes.js

|--index.js

cafes.js

import CafeAPI from "../../apis/cafe.js";
const state = {
  //status = 0 -> 数据尚未加载
  //status = 1 -> 数据开始加载
  //status = 2 -> 数据加载成功
  //status = 3 -> 数据加载失败
  test: 111,
  cafe: {},
  cafeLoadStatus: 0,
  cafes: [],
  cafesLoadStatus: 0,
  // 添加cafe 的数据状态
  cafeAddStatus: 0,
};
const 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;
  },
};
const actions = {
  //   载入coffe馆列表
  loadCafes({ commit }) {
    commit("setCafesLoadStatus", "1");
    CafeAPI.getCafes()
      .then(function (response) {
        commit("setCafes", response.data.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);
      });
  },
};
const 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;
  },
};
export default {
  namespaced: true,
  state,
  actions,
  mutations,
  getters,
};

index.js

import Vue from "vue";
import Vuex from "vuex";
import cafes from "./modules/cafes";
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
    cafes,
  },
});

路由部分 router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "../pages/layout.vue";
import Home from "../pages/home.vue";
import Cafes from "../pages/cafes.vue";
import newCafes from "../pages/newCafe.vue";
import Cafe from "../pages/cafe.vue";
Vue.use(VueRouter);
//嵌套路由, 参考教程 https://router.vuejs.org/zh/guide/essentials/nested-routes.html
const routes = [
  {
    path: "/",
    name: "layout",
    component: Layout,
    children: [
      {
        path: "home",
        name: "home",
        component: Home,
      },
      {
        path: "cafes",
        name: "cafes",
        component: Cafes,
      },
      {
        path: "cafes/new",
        name: "cafes",
        component: newCafes,
      },
      {
        path: "cafes/:id",
        name: "cafe",
        component: Cafe,
      },
    ],
  },
];
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});
export default router;

页面部分:
layout.vue

<template>
  <div id="app-layout">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "layout",
  created() {
    //载入数据
    this.$store.dispatch("cafes/loadCafes");
  },
};
</script>
<style lang="scss"></style>

cafes.vue

<template>
  <div id="cafes">
    <div class="grid-x">
      <div class="large-12 medium-12 samll-12 cell">
        <cafe-map></cafe-map>
      </div>
    </div>
  </div>
</template>
<script>
import CafeMap from "../components/cafes/CafeMap";
export default {
  name: "cafes",
  components: {
    CafeMap,
  },
};
</script>
<style lang=""></style>

组件:
CafeMap.vue

<template>
  <div id="container">
    <div>{{ getCafes }}</div>
  </div>
</template>
<script>
import AMap from "AMap";
import { mapGetters } from "vuex";
export default {
  props: {
    longitude: {
      type: Number,
      default: function () {
        return 30.29;
      },
    },
    latitude: {
      type: Number,
      default: function () {
        return 120.21;
      },
    },
    zoom: {
      type: Number,
      default: function () {
        return 5;
      },
    },
  },
  data() {
    return {
      markers: [],
    };
  },
  computed: {
    ...mapGetters("cafes", ["getCafes"]),
  },
  mounted() {
    // this.initMap();
    this.buildMarkers();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("container", {
        center: [this.latitude, this.longitude],
        zoom: this.zoom,
      });
    },
    buildMarkers() {
      this.markers = [];
      this.getCafes;
      console.log("this.getCafes ", this.getCafes);
    },
  },
};
</script>
<style lang="scss">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>

现在遇到的问题是:
组件 <div>{{ getCafes }}</div>中有相关的数据
但是mounted, buildMarkers() 函数console.log("this.getCafes ", this.getCafes);没有数据

不太明白怎么回事, 请各位大神指点一下,问题出在哪块,该怎么修改代码

以上是 vuex 中的生命周期问题 的全部内容， 来源链接： utcz.com/p/936923.html