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 属性填充了数百个项目。我希望一旦填充了这些数据，我会在页面上看到一堆带有item.id 的li 行。

但尽管组件中没有错误且数据明显良好，但我没有看到模板呈现任何内容。

在填充 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 标签，即使我希望看到（空）脚本中还有一个问题。

Answer 1

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

除此之外，在您的 'populate' 突变中，您正在覆盖观察/反应对象。

使用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);
    }
}

或将所有元素推送到现有的、观察/反应性数组：

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