Vue.js VueJS/VueX：填充存储状态时显示表

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

最好的处理方法是什么

目前，我从

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>

从“vuex”导入{mapActions，mapGetters}；
导出默认值{
已创建：函数（）{
log（“created（）-called”）；
这个.getUserCars（）；
},
挂载：函数（）{
log（“mounted（）-调用”）；
},
已销毁：函数（）{
log（“destromed（）-called”）；
},
观察：{
用户站点（新值、旧值）{
log（`watch（）从${oldValue}更新为${newValue}`）；
常量选项={
数据：{type:“local”，来源：this.userCars（），pageSize:5}，
布局：{主题：“默认”，类：，滚动：！1，页脚：！1}，
可排序：！0，
分页：！0，
栏目：[
{字段：“名称”，标题：“名称”}，
{字段：“createdAt”，标题：“createdAt”}
]
};
$（'m#u datatable'）.mDatatable（选项）；
},
},
计算：{
},
方法：{
…映射器（[“用户汽车]），
…映射操作（[“getUserCars”]），
}
};

如果存储中的

getUserCars（）

操作将状态与数据混合，那么您可以拥有一个类似于我在代码中看到的

userCars

的getter您只需将mapGetters助手从方法移动到computed即可。

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

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

---

我想你不需要手表。您是否尝试使用计算属性？默认情况下，存储状态也是被动的。如果状态更改，它将更新UI。但是操作必须在计算属性内。@varit05好的，那么我需要将负责构建datatable的代码放在哪里？您的UI是否直接与数据库交互，而没有任何REST Api/服务？不，首先我使用REST Api调用获取汽车列表，并使用状态属性中的变异来存储它们。然后，我想自动获取刚刚加载的汽车列表，以使用我在描述中输入的javascript代码创建我的datatable