清单未在vue.js中动态显示

问题描述

我是vue.js的新手，自己学习vue doc，youtube视频等。我已经搜索了一段时间，正在看youtube教程，但到目前为止还没有找到答案，希望你们能够为我提供帮助。

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

我正在使用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
};

然后像这样在我的提示中得到它：

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

解决方法

您需要使用mapState并在计算值内部使用它，因为随后计算值将响应状态变化。您不需要getter，但如果需要，这里是带有getter的版本。如果您的商店模块称为journees，则应该是这样：

没有吸气剂

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

使用吸气剂

<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"])
    },};
</script>