Блог

Главная - Вопросы по программированию - VueJS / VueX: отображать таблицу, когда состояние хранилища заполнено

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

#vue.js #vuejs2 #vue-component #vuex

#vue.js #vuejs2 #vue-компонент #vuex

Вопрос:

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

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

На данный момент я вызываю действие хранилища (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. Я думаю, вам не нужны часы. Вы пробовали это с вычисляемыми свойствами?

2. По умолчанию состояния хранилища также являются реактивными. Если состояние изменится, это обновит пользовательский интерфейс. Но действие должно быть внутри вычисляемых свойств.

3. @varit05 Хорошо, итак, куда мне нужно поместить код, отвечающий за построение datatable?

4. Взаимодействует ли ваш пользовательский интерфейс напрямую с базой данных без какого-либо REST API / сервиса?

5. Нет, сначала я получаю список машин с помощью вызова REST API и сохраняю их, используя мутацию в свойстве state. Затем я хотел бы автоматически получить список только что загруженных автомобилей для создания моей таблицы данных, используя код javascript, который я ввел в свое описание

Ответ №1:

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

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

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