Vue. Where does this code go?

تعرفه تبلیغات در سایت
عنوان عکس
عنوان عکس
عنوان عکس
عنوان عکس
عنوان عکس

جستجوگر

یافته ها در جستجو

    امکانات وب

    آرشیو مطالب

    برچسب ها

    Vote count: 0

    We jumped into Vue, and totally loved the idea of a store, separating page state from presentation. We wrote a zippy alert component, that displayed whatever alert string was in store.pageError.

    Then we wanted to add confirm(), so we gave our component a ref, and a popConfirm() method that returned a promise, and whenever we wanted to confirm something, we called...

    vm.$refs.alertConfirm.confirm("Are you sure?")
    .then(function(conf){if(conf) /* do it */ })
    

    ...and the component became responsible for managing its own visibility, without anything happening in the store.

    This worked so well that soon lots of components started sprouting refs, so they could be called directly as methods. In the latest incarnation, we implemented a tunnel with six steps, with api calls and user actions called in parallel with Promise.all(), and it works great, but the store has taken a big step back, and more and more state is being managed directly in Vue components. These components are no longer dumb representations of store state, but increasingly little functional sequences with state managed internally.

    How do we reassert the idea of a store, while keeping the convenience of calling these short functional sequences as methods?

    Here is our tunnel code. This currently lives in a Vue component, where markup, state, and sequential logic are joyously mixed. This can't be good?

    startTunnel(idNote) {
        var rslt = {
            idNote: idNote,
            photoJustif: null,
            date: null,
            currency: "",
            montant: null
        }
        //---------------Step 1: photo et count notes in parallel
        Promise.all([
          me.$refs.camera.click(),
          getUrlAsJson("api/note/getNotes"),
        ])
        //---------------Step 2: Choose note if > 1
        .then(function (results) {
            rslt.photoJustif = results[0];
            me.$refs.loader.hide();
            // if we already know the note, go straight to Step 3.
            if (rslt.idNote)
                return true;
    
            // if no idNote supplied, and only one returned from server, assign it.
            if (results[1].notes.length === 1 && !rslt.idNote) {
                rslt.idNote = results[1].notes[0].idNote;
                return true;
            }
            else {
                return me.$refs.chooseNote.choose(results[1].notes)
                // combine photoJustif from Step 1 with idNote chosen just above.
                .then(function (idNoteChosen) { rslt.idNote = idNoteChosen; return true })
            }
        })
        //--------------Step 3: OCR
        .then(() => me.doOcr(rslt))
        //--------------Step 4: Choose nature and retrieve card statement in parallel
        .then(function (ocrResult) {
            me.$refs.loader.hide()
            if (ocrResult != null) { //Si ocr n'a pas échoué
                rslt.date = ocrResult.date;
                rslt.montant = ocrResult.montant;
                rslt.currency = ocrResult.currency;
                return Promise.all([
                  me.$refs.chooseNature.init(rslt.idNote, ocrResult.grpNatures),
                  getUrlAsJson("api/expense/relevecarte/filterpers", { IdPerson: 1, montant: ocrResult.montant })
                ]);
            }
            else return null;
        })
    
        //--------------Step 5: Choose Nature
        .then(function (natureAndFraisCartes) { 
            if (natureAndFraisCartes != null) {
                rslt.idNature = natureAndFraisCartes[0].id;
                if (rslt.montant != null && natureAndFraisCartes[1].length > 1)
                    return me.$refs.choixFraisCarte.init(rslt, natureAndFraisCartes[1]);
                else
                    return null;
            }
            else return null;
        })
        //------------- Step 6: End tunnel
        .then(function (fraisCarte) {
            me.$refs.loader.popInstant();
            me.$refs.form.idNote.value = rslt.idNote;
            var jsonObject;
    
            if (fraisCarte != null) {
                me.$refs.form.action.value = 15;
                jsonObject = {
                    "DateFrais": rslt.date,
                    "IdNature": rslt.idNature,
                    "MontantTicket": rslt.montant,
                    "Justificatif": rslt.photoJustif,
                    "idCarte": fraisCarte.id
                };
            }
            else {
                me.$refs.form.action.value = 14;
                jsonObject = {
                    "DateFrais": rslt.date,
                    "IdNature": rslt.idNature,
                    "MontantTicket": rslt.montant,
                    "Justificatif": rslt.photoJustif,
                    "idCarte": 0
                };
            }
    
            me.$refs.form.obj.value = JSON.stringify(jsonObject);
            me.$refs.form.submit();
        })
        .catch(function (error) {
            me.$refs.loader.hide();
            me.active = false;
            me.rslt = {
                idNote: idNote,
                photoJustif: null,
                date: null,
                montant: null
            };
            console.log(error);
            vueStore.pageError = me.allStrings.tunnelPhoto.erreurTunnel;
        })
    }
    
    asked 40 secs ago
    bbsimonbb

    نویسنده : استخدام کار بازدید : 3 تاريخ : دوشنبه 23 بهمن 1396 ساعت: 20:08
    برچسب‌ها :
    اخبار و رسانه هاهنر و ادبیاترایانه و اینترنتعلم و فن آوریتجارت و اقتصاداندیشه و مذهبفوتو بلاگوبلاگ و وبلاگ نویسیفرهنگ و تاریخجامعه و سیاستورزشسرگرمی و طنزشخصیخانواده و زندگیسفر و توریسمفارسی زبان در دیگر کشورها