مجید
4 سال پیش توسط مجید مطرح شد
1 پاسخ

استفاده از async asyncData در Nuxt

سلام.
من میخام این قطعه کد ها را به صورت async asyncData بنویسم کسی میدونه چطوری باید بنویسم؟
کسی میتونه برام بنویسه
طبق داکیومنت جلو رفتم ولی ارور داشتم

<script>
   import axios from 'axios';
    import { debounce } from "lodash";

    export default {
        name: "BaseDataTable",

        props: {
            fetchUrl: {
                type: String,
                required: true
            },
            deleteUrl: {
                type: String,
                required: false
            },
            routeName: {
                type: String,
                required: true
            },
            titleText: {
                type: String,
                required: true
            },
            itemKey: {
                type: String,
                default: 'id'
            },
            createItemRoute: {
                type: String,
                required: false
            },
            editRoute: {
                type: String,
                required: false
            },
            showRoute: {
                type: String,
                required: false
            },
        },

        data() {
            return {
                search: this.$route.query.search,
                singleSelect: false,
                selected: [],
                headers: [],
                items: [],
                total: null,
                loading: false,
                footerProps: {
                    'items-per-page-options': [5, 10, 25, 50],
                    'items-per-page-text': 'تعداد رکورد در هر صفحه:',
                    'page-text': ''
                },
                options: {
                    page: this.$route.query.page ?? 1,
                    itemsPerPage: this.$route.query.per_page ?? 10,
                    sortBy: this.$route.query.sort_by ? [this.$route.query.sort_by] : ['id'],
                    sortDesc: this.$route.query.sort_type === 'desc' ? [true] : [false],
                    groupBy: [],
                    groupDesc: [],
                    multiSort: false,
                    mustSort: false,
                }
            }
        },

        computed: {
            selectedIds() {
                return this.selected.map(item => item.id);
            }
        },

        created() {
            this.fetchItems();
        },

        methods: {
            deleteItems() {
                axios.post(this.deleteUrl, { items: this.selectedIds })
                    .then(() => {
                        this.items.data = this.items.data.filter(item => ! this.selected.includes(item));
                    }).finally(() => this.selected = [])
            },
            updateOptions(options) {
                const params = this.createQuery(options);

                this.$router.push({ name: this.routeName, query: params }, () => {});
                this.fetchItems();
            },
            fetchItems() {
                const params = this.createQuery(this.options);

                this.loading = true;
                axios.get(this.fetchUrl, { params })
                    .then(({ data }) => {
                        this.headers = data.headers;
                        this.items = data.items;
                        this.total = data.items.total;
                        this.options.page = data.items.current_page;
                        this.options.itemsPerPage = Number(data.items.per_page);
                        this.footerProps['page-text'] = `${this.items.from}-${this.items.to} از ${this.items.total}`;
                    }).finally(() => this.loading = false);
            },
            searchItems(){
                this.options.page = 1;
                this.updateOptions(this.options);
            },
            createQuery(options) {
                return {
                    page: options.page,
                    per_page: options.itemsPerPage,
                    sort_by: options.sortBy[0],
                    sort_type: options.sortDesc[0] === true ? 'desc' : 'asc',
                    search: this.search
                };
            }
        }
    }
</script>

ثبت پرسش جدید
اشکان نظری
تخصص : برنامه نویس
@ashkannazari248 4 سال پیش مطرح شد
0

سلام. شما توی asyncData باید یه تابع به شکل زیر نویسی و یه ابجکت بسازی و اطلاعاتی که نیاز به پردازش دارن و یا باید از سرور دریافت بشن رو بگیری و بریزیشون توی ابجکتی که ساختی و ریترنش کنی. کل فعالیت های داخلش باید async/await باشن

async asyncData(context){
let obj={};
let myData=await context.$axios.$get(myUrl);
await Object.assign(obj, ...myData);
return obj;
}

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام