folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder Nuxtjs'de Plugin Kullanmak Ve Helper Function Eklemek



Nuxtjs'de Plugin Kullanmak Ve Helper Function Eklemek

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    TeRRoR
    TeRRoR's avatar
    Kayıt Tarihi: 06/Nisan/2007
    Erkek

    Hacılar şu şekilde plugin ekleyip daha sonra helper function'u tanımlamak istiyorum. Ancak show functionu içerisinde context.app.$toast gelmemiş gözüküyor. Yukarıda Vue.use ile eklediğimde gelmiş gerekiyor diye düşünüyorum. Nuxt page içerisinde this.$toast diye erişebiliyorum :/ $toast'a helper function içerisinden nasıl erişebilirim?

    import Vue from 'vue'
    import VueToast from 'vue-toast-notification'
    import 'vue-toast-notification/dist/theme-default.css'

    Vue.use(VueToast, {
      position: 'top-right',
      duration: 3000,
      dismissible: true,
      queue: false,
      pauseOnHover: true
    })

    export default (context, inject) => {
      inject('showToast', {
        show ({
          message
        }) {
          context.app.$toast.open({
            message,
            type: 'error'
          })
        }
      })
    }
    herkes programcı olmak zorunda değildir, lütfen bir zorunluluk gibi programlama dilleri öğrenmeye çalışmayın. yabancı dil filan öğrenin amq.// s.kimin etini yerim, kasaba minnet etmem.// ince düşünene kalın girer.//
    Reply With Quote Alıntı yap
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    lazz
    lazz's avatar
    Kayıt Tarihi: 15/Ekim/2007
    Erkek

    evet baktım kodlarıma 

    hatırladıgım kadarı ile bu sekılde kullanamayıp vuex kullanmıstım 

    vuex ılede master layaut dınleme yapıyorum

    istek gelincede toast acıyorum

    this.$store.subscribe((mutation, state) => {
      if (mutation.type === "showMessage") {
        this.toast.message = state.content;
        this.toast.color = state.color;
        this.toastShow = true;
      }
    });



    lazz tarafından 28/Oca/22 13:15 tarihinde düzenlenmiştir
    Reply With Quote Alıntı yap
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    TeRRoR
    TeRRoR's avatar
    Kayıt Tarihi: 06/Nisan/2007
    Erkek
    lazz bunu yazdı

    evet baktım kodlarıma 

    hatırladıgım kadarı ile bu sekılde kullanamayıp vuex kullanmıstım 

    vuex ılede master layaut dınleme yapıyorum

    istek gelincede toast acıyorum

    this.$store.subscribe((mutation, state) => {
      if (mutation.type === "showMessage") {
        this.toast.message = state.content;
        this.toast.color = state.color;
        this.toastShow = true;
      }
    });



    vuetify'in snackbar'ını bu şekilde kullanıyorum. Ancak multiple açmak gerektiğinde cortluyor. Şimdi beceremediğim için gidip bu iş için store tanımlayıp. store'da $toast'a erişebiliyorum diye oradan açtırıp buradan event dispatch edersem ayıp olur. Bu nuxt'un plugin mevzusunu hala adam akıllı açıklayan bir yer bulamadım :/

    herkes programcı olmak zorunda değildir, lütfen bir zorunluluk gibi programlama dilleri öğrenmeye çalışmayın. yabancı dil filan öğrenin amq.// s.kimin etini yerim, kasaba minnet etmem.// ince düşünene kalın girer.//
    Reply With Quote Alıntı yap
  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    lazz
    lazz's avatar
    Kayıt Tarihi: 15/Ekim/2007
    Erkek

    gene aynı aynı yapıyı kullanıp snackbardakı gıbı degılde baska bır komponentı tetıklıyebılırsın 

    ozaman sadace push yapıp komponentıne prop yollarsın aradıgın buysa

    hazır bır komponent kullanıyorsan cogunlugu zaten push mantıgıyla calısıyor

    this.$store.subscribe((mutation, state) => {
      if (mutation.type === "showMessage") {
        this falancaFonksiyon('err','mesajım');
      }
    });

     

    şeklındede kullanabılırsın

    Reply With Quote Alıntı yap
  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    antichrist
    antichrist's avatar
    Kayıt Tarihi: 15/Ağustos/2021
    Erkek
    export default (context, inject) => {
      const sayHey = () => {
        console.log('helloo')
      };

      inject('sayHey', sayHey);
    }
     
    store içerisinde de this.$sayHey() diyerek erişebilirsin. nuxt.config.js içerisindeki plugin e dosyayı tanıtmayı unutma.
     
    Bu arada amaç toast kullanmaksa plugin olarak eklemeden de nuxt ile kullanabileceğin vue-toastification paketini öneririm.
     
     
    modules: ["@nuxtjs/axios", "vue-toastification/nuxt"],
     
    bu şekilde nuxt.config'e eklediğin vakit tüm componentlerde doğrudan this.$toast.xx şeklinde erişebilirsin. Ekstradan inject etmene gerek yok.
    ~
    Reply With Quote Alıntı yap
Toplam Hit: 928 Toplam Mesaj: 5
nuxtjs nuxtjs plugin