VueJS / VueX：填充存储状态时的显示表

Question

我正在尝试开发一个单个文件组件，我想从后端获取用户汽车并在表格中显示所有加载的汽车。

处理这个问题的最佳方法是什么？

目前，我从created()钩子调用了一个商店动作（getUserCars），然后我尝试使用watch来监听我商店的状态属性的任何更改，以便能够在UI中构建我的表格。但它还没有工作..

请你帮助我好吗？

<script>
import { mapActions, mapGetters } from "vuex";

export default {
    created: function() {
        console.log("created() - called");
        this.getUserCars();
    },
    mounted: function() {
        console.log("mounted() - called");
    },
    destroyed: function() {
        console.log("destroyed() - called");
    },
    watch: {
        userSites(newValue, oldValue) {
            console.log(`watch() Updating from ${oldValue} to ${newValue}`);

            const options = {
                data: {type: "local", source: this.userCars(), pageSize: 5},
                layout: {theme: "default", class: "", scroll: !1, footer: !1},
                sortable: !0,
                pagination: !0,
                columns: [
                    {field: "name", title: "Name"},
                    {field: "createdAt", title: "Created At"}
                ]
            };
            $('#m_datatable').mDatatable(options);

        },
    },
    computed: {

    },
    methods: {
        ...mapGetters(["userCars"]),
        ...mapActions(["getUserCars"]),
    }
};
</script>

Answer 1

如果您的商店中的getUserCars()动作使用数据保持状态，那么您可以在代码中看到userCars之类的吸气剂。您只需将mapGetters帮助器从方法移动到计算。

然后，您可以在模板中访问它并执行您想要的任何操作。

computed: {
    ...mapGetters(["userCars"])
},
methods: {
    ...mapActions(["getUserCars"])
}