Vuex getter 使用 v-for 填充组件

Question

我正在构建一个 vue2 组件，其中包含一个 vuex store 对象。该组件如下所示：

<template>
    <ul id="display">
        <li v-for="item in sourceData()">
            {{item.id}}
        </li>
    </ul>
</template>

<script>  
    export default {
        mounted: function () {
            console.log('mounted')
        },
        computed: {
            sourceData: function() {
                return this.$store.getters.visibleSource
            }
        }
    }
</script>

商店是通过进程开始时的 ajax 调用填充的，在主 javascript 条目中：

new Vue({
    store,
    el: '#app',
    mounted: function() {
        this.$http.get('/map/' + this.source_key + '/' + this.destination_key)
            .then(function (response) {
                store.commit('populate', response.data)
            })
            .catch(function (error) {
                console.dir(error);
            });
    }
});

我没有看到任何错误，当我使用 Vue devtools 资源管理器时，我可以看到我的组件的 sourceData 属性填充了数百个项目。我希望在填充此数据后，我会在页面上看到一堆 li 行，其中包含 item.id。

但是尽管没有错误并且组件中的数据看起来不错，但我没有看到模板呈现任何内容。

填充 vuex 存储后是否需要使用某种回调来触发组件？

编辑：添加商店代码：

import Vue from 'vue';
import Vuex from 'vuex';
import { getSource, getDestination } from './getters'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        field_source: [],
        field_destination: []
    },
    getters: {
        visibleSource: state => {
            // this just does some formatting 
            return getSource(state.field_source)
        },
        visibleDestination: state => {
            return getDestination(state.field_destination)
        }
    },
    mutations: {
        populate(state, data) {
            state.field_source = data.source
            state.field_destination = data.destination
        }
    }
})

EDIT2：也许这不是 v-for 的问题——我没有从正在渲染的模板中看到任何内容，甚至没有看到我期望的主要 ul 标记see (empty) 即使脚本中还有问题。

Answer 1

sourceData 是计算的属性，不是方法。您不需要调用它。不要像v-for="item in sourceData()"那样使用，要像v-for="item in sourceData".

那样使用

除此之外，在您的 'populate' 突变中，您正在覆盖 observed/reactive 对象。

或者使用Vue.set():

mutations: {
    populate(state, data) {
        // was state.field_source = data.source
        Vue.set(state, 'field_source', data.source);
        // was state.field_destination = data.destination
        Vue.set(state, 'field_destination', data.destination);
    }
}

或将所有元素推送到现有、observed/reactive、数组：

mutations: {
    populate(state, data) {
        // was state.field_source = data.source
        state.field_source.push(...data.source);
        // was state.field_destination = data.destination
        state.field_destination.push(...data.destination);
    }
}

Vuex getter 使用 v-for 填充组件

Vuex getter to populate a component using v-for

javascript

vue.js

vuejs2

vue-component

vuex