راکت

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

1 پاسخ

سلام.
من میخام این قطعه کد ها را به صورت 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>
ثبت پرسش جدید

پاسخ‌ها

1
اشکان نظری
اشکان نظری
@ashkannazari248

تخصص: برنامه نویس

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

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

شاید پاسخ شما همین‌جا باشد

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

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