VueJS / VueX: отображать таблицу, когда заполнено состояние магазина - PullRequest
Новая
       9

VueJS / VueX: отображать таблицу, когда заполнено состояние магазина

0 голосов
/ 26 марта 2019

Я пытаюсь разработать отдельный файловый компонент, в котором я хотел бы получить пользовательские автомобили из бэкэнда и отобразить все загруженные автомобили в таблице.

Какой лучший способ справиться с этим?

На данный момент я вызываю store store (getUserCars) из ловушки created(), а затем пытаюсь прослушать любое изменение свойства состояния моего магазина, используя watch, чтобы возможность построить мою таблицу в пользовательском интерфейсе. Но это пока не работает ..

Не могли бы вы мне помочь? 

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

1 Ответ

1 голос
/ 26 марта 2019

Если ваше действие getUserCars() в вашем магазине гидратирует состояние данными, то вы можете получить метод получения, подобный методу userCars, который я вижу в вашем коде. Вам просто нужно переместить помощника mapGetters из методов в вычисляемые.

Затем вы можете получить к нему доступ в шаблоне и делать все, что захотите. 

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