vue.js 中未动态显示列表

Question

我是 vue.js 的新手，正在通过 vue 文档、youtube 视频等自行学习。我一直在寻找一段时间并查看youtube教程，但到目前为止还没有找到答案，希望你们能够帮助我。

我的问题是，我正在构建一个网络应用程序，我需要动态显示对象列表，但它在我第一次加载该页面时不显示。我必须去其他路线然后回来看它，所以我想我误解了那个专业领域的某些生命周期或其他东西......

我正在使用 vuex 来存储和检索我的数据，如下所示：

import Vue from 'vue';

const state = {

    journees: {},
};

const getters = {

    getJourneeList(state) {
        return state.journees;
    }
};

const mutations = {
   
    GET_LIST(state, journees) {
        state.journees = journees;
    }
};

const actions = {

    getJourneesUser({commit}) {
        Vue.axios.get('/journee/')
            .then( res => {
                commit('GET_LIST', res.data)
            })
            .catch((err) => console.log(err))
    }
};



export default {
    state,
    getters,
    mutations,
    actions
};

然后我像这样在我的 vue 中获取它：

<template>
  <v-container>
      <v-card v-for="heure in heures" :key="heure._id">
        <v-card-title>{{ heure }}</v-card-title>
      </v-card>
  </v-container>
</template>

<script>
export default {
  name: "TimeList",
  data() {
    return {
      heures: this.$store.getters.getJourneeList,
    }
  },
  created() {
    this.$store.dispatch('getJourneesUser');
  }
}
</script>

Answer 1

您需要使用 mapState 并在计算值中使用它，因为计算值将响应状态变化。您不需要 getter，但如果您需要，这里是带 getter 的版本。如果你的商店模块叫 journees:

应该是这样的

没有getter

<template>
    <v-container>
        <v-card v-for="heure in journees" :key="heure._id">
            <v-card-title>{{ heure }}</v-card-title>
        </v-card>
    </v-container>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "TimeList",
    computed: {
        ...mapState(["journees"])
    },
    created() {
        this.$store.dispatch("getJourneesUser");
    },
};
</script>

和getter

<template>
    <v-container>
        <v-card v-for="heure in getJourneeList" :key="heure._id">
            <v-card-title>{{ heure }}</v-card-title>
        </v-card>
    </v-container>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    name: "TimeList",
    computed: {
        ...mapGetters(["getJourneeList"])
    },
    created() {
        this.$store.dispatch("getJourneesUser");
    },
};
</script>

vue.js 中未动态显示列表

List isn't dynamically displayed in vue.js

javascript

frontend

javascript-framework

vue.js

vuex