e
sv

Nuxt.js'de global bir özel eklenti nasıl oluşturulur?

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Nuxt.js, Vue gibi, üç tür olabilen eklentileri destekler: özel olarak oluşturulmuş eklentiler, Vue eklentileri ve harici paketler ve modüller. Nuxt belgeleri son ikisini ayrıntılı olarak tartışırken, Nuxt uygulamanızda özel bir eklentinin nasıl oluşturulacağını ve kullanılacağını kısaca açıklar.

Global bir özel eklenti, birkaç durumda kullanışlı olabilir. Örneğin, uygulamaya çalıştığınız bir özellik için açık kaynaklı bir eklenti bulamadığınızı veya bulduklarınızdan tamamen memnun olmadığınızı düşünelim. Ya da belki biraz yaratıcı hissediyorsunuz ve elinizde biraz zaman var.

Bu eğitimde, hem Vue hem de JavaScript kullanarak kendi özel eklentimizi oluşturmak için iki farklı seçeneği ele alacağız. Örnek olarak, özel eklentimiz doğum günümü Nuxt uygulamanızın konsolunda gösterecek, ancak bunu projenizin ihtiyaçlarına göre kişiselleştirebilirsiniz. Başlayalım!

Bileşeni oluşturma

İlk adım, Vue bileşenini oluşturmaktır. Bu makale için, basit başarı ve hata mesajlarını gösterecek temel bir tost bileşeni kullanacağız. Bu makale için zaten bir tane oluşturdum ve daha sonra ayrıntılı olarak inceleyeceğiz:

 <şablon>
  <div class="toast-element">
    <div :class="['toast-container', { başarı: durum === 'başarı', hata: durum === 'hata' }]">
      <div class="icon">
        <svg
          v-if="durum === 'başarı'"
          genişlik = "8"
          yükseklik = "7"
          viewBox="0 0 8 7"
          doldur = "yok"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M6.96304 0.962891L2.88896 5.37647L1.03711 3.3703" vuruş="beyaz" vuruş-width="1.5" vuruş-linecap="yuvarlak" vuruş-linejoin="yuvarlak" />
        </svg>
        <svg
          v-başka
          genişlik = "3"
          yükseklik = "10"
          viewBox="0 0 3 10"
          doldur = "yok"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M1 1.6665V4.99984" vuruş = "beyaz" vuruş genişliği = "2" vuruş-linecap = "yuvarlak" vuruş-linejoin="yuvarlak" />
          <path d="M1 8.3335H1.00833" vuruş = "beyaz" vuruş genişliği = "2" vuruş-linecap = "yuvarlak" vuruş-linejoin="yuvarlak" />
        </svg>
      </div>
      <p>
        {{ İleti }}
      </p>
    </div>
  </div>
</şablon>

<script>
varsayılan dışa aktarma {
  veri () {
    dönüş {
      tostIsVisible: yanlış,
      İleti: '',
      durum: ''
    }
  },
  monte edilmiş () {
    this.$store.subscribe((mutasyon, durum) => {
      if (mutation.type === 'toast/showToast') {
        this.message = durum.toast.content
        this.state = state.toast.state
        this.toastIsVisible = doğru
        document.querySelector('.toast-element').classList.add('enter')
        setTimeout(() => {
          if (this.toastIsVisible) {
            this.removeToast()
          }
        }, 3000)
      }
    })
  },
  yöntemler: {
    kaldırToast () {
      document.querySelector('.toast-element').classList.replace('gir', 'ayrıl')
      setTimeout(() => {
        this.toastIsVisible = yanlış
      }, 240)
    }
  }
}
</script>

<stil kapsamlı>
.toast-eleman {
  pozisyon: sabit;
  üst: -90 piksel;
  sol: 0;
  genişlik: %100;
  yükseklik: maksimum içerik;
  ekran: esnek;
  haklı içerik: merkez;
  hizalama öğeleri: merkez;
  z-endeksi: 7;
  opaklık: 0;
  geçiş: tümü 240ms kübik-bezier(0, 0.0, 0.2, 1) 0s;
}
.girmek {
  üst: 20 piksel;
  opaklık: 1;
}
.ayrılmak {
  üst: 20 piksel;
  dönüştürme: ölçek(0.9);
}
.toast-konteyner {
  genişlik: uygun içerik;
  kenarlık: 1 piksel katı şeffaf;
  sınır yarıçapı: 5 piksel;
  dolgu: 0.9375rem 1.875rem;
  ekran: ızgara;
  grid-template-columns: tekrarla(2, maksimum içerik);
  sütun aralığı: 0.9375rem;
  hizalama öğeleri: merkez;
}
.başarı {
  sınır rengi: #037F10;
  arka plan rengi: #F4FFF6;
}
.hata {
  kenarlık rengi: #FF2525;
  arka plan rengi: #FFF4F4;
}
.ikon {
  sınır yarıçapı: %50;
  ekran: esnek;
}
.success .icon {
  dolgu: 6 piksel;
  arka plan rengi: #037F10;
}
.hata .icon {
  dolgu: 5px 8px 5px 9px;
  arka plan rengi: #FF2525;
}
p {
  genişlik: maksimum içerik;
  yazı tipi boyutu: 1.0625rem;
  yazı tipi ağırlığı: 400;
}
.success p {
  renk: #037F10;
}
.hata p {
  renk: #FF2525;
}
</style>

Tost bileşeni, aşağıdaki gibi görünen iki düğme oluşturur:

Tost Hatası
Tost bileşeni hata mesajı
Tost Başarısı
Tost bileşeni başarı mesajı

Tost bileşenini incelerseniz, mağazanın subscribe() yöntemine bir çağrı olduğunu fark edeceksiniz. Bileşenimiz dinamik olduğu için içeriği bir yerden, yani mağazadan almamız gerekecek.

Mağaza

Tost bileşenimizde, tost mesajı ve durumu, ya success ya da error olmak üzere iki değişken vardır. Vuex'in yardımıyla durumu Nuxt uygulamamızda saklayacağız. Bu nedenle, tercihen uygulamanın genel mağazasından farklı bir mağazaya ihtiyacımız olacak:

 dışa aktarma const durumu = () => ({
  içerik: '',
  durum: ''
})

const mutasyonları dışa aktar = {
  showToast (durum, yük) {
    durum.içerik = yük.içerik
    durum.durum = yük.durum
  }
}

Bileşeni mağazaya abone olun

Artık mağazamız hazır olduğuna göre, mağaza ile tost bileşeni arasında bir iletişim kanalı kurmamız gerekiyor. Burada, subscribe() yöntemi, bileşeni mağazanın mutasyonlarına abone olarak işe yarar. Bu nedenle, deponun her mutasyonundan sonra çağrılır, mutasyon ve durum nesnelerini argüman olarak alır. subscribe() yöntemi hakkında daha fazla bilgi edinmek için Vuex API sayfasındaki abone olma bölümüne bakın.

Deponun her mutasyonundan sonra subscribe() yöntemi çağrıldığından, tost deposunun mutasyona uğradığını doğrulamamız gerekir. Bunu onayladıktan sonra devam edip bileşenin değişkenlerini, mesajı ve durumunu güncelleyebiliriz:

 this.$store.subscribe((mutasyon, durum) => {
  if (mutation.type === 'toast/showToast') {
    this.message = durum.toast.content
    this.state = state.toast.state
    this.toastIsVisible = doğru
    document.querySelector('.toast-element').classList.add('enter')
    setTimeout(() => {
      if (this.toastIsVisible) {
        this.removeToast()
      }
    }, 3000)
  }
})

Tost depomuz toast.js olduğundan ve mutasyon showToast() yöntemi olduğundan, mutasyonun türünün toast/showToast olduğunu kontrol ederiz.

Eklentiyi başlat

Bileşeni oluşturmayı ve işlevselliğini uygulamayı bitirdiğimize göre, ihtiyacımız olduğunda tost bileşenini göstermek için bir show yöntemi çağırabilmemiz için onu Nuxt uygulamasında kullanılabilir hale getirmemiz gerekiyor; bunu plugins klasöründe yapacağız.

Eklentiyi uygulama genelinde kullanılabilir hale getirmek, eklentiyi enjekte etmek olarak da adlandırılır ve Vue, bu amaç için inject() işlevini sağlar. Bu da, show yönteminin nesnesinin önüne bir $ ekler:

 varsayılanı dışa aktar ({ uygulama, mağaza }, enjekte) => {
  inject('tost makinesi', {
    showToast ({ içerik = '', durum = '' }) {
      store.commit('toast/showToast', {içerik, durum })
    }
  })
}

Bu nedenle, Nuxt uygulamamızda bu $toaster.showToast() yöntemini her çağırdığımızda, content ve state parametrelerini de iletmemiz gerekir.

Ancak eklentiniz, örneğimizde olduğu gibi doğum günümü gösteren bazı JavaScript işlevleri içinse, yalnızca aşağıdaki koda ihtiyacınız olacaktır:

 varsayılanı dışa aktar ({ uygulama }, enjekte) => {
  inject('displayBirthday', () => {
    konsol.log(`3 Mart!`)
  })
}

$displayBirthday() doğum günümü konsolunuza kaydedecek. Böyle bir durumda bir mağazaya veya bileşene ihtiyacınız olmaz.

İki kod parçacığına çok dikkat ettiyseniz, inject() işlevinin ikinci parametresinin türlerinin değişiklik gösterdiğini fark edeceksiniz. Birincisi bir nesne, ikincisi ise bir fonksiyondur. Nesne türü, eklentiniz birden fazla eylem gerektirebileceğinde kullanışlıdır, işlev ise tek bir eylem için en iyisidir. Ancak, nesnenin içinde yalnızca tek bir yöntem olabilir.

Eklentiyi tanımlayın ve kaydedin

Eklentiyi oluşturmadan önce Nuxt uygulamamızın tost eklentisinin var olduğunu onaylaması gerekiyor. Bunun için kodu nuxt.config.js dosyasındaki plugins özelliğini kullanarak ekleyebiliriz:

 varsayılan dışa aktarma {
  eklentiler: [
    { kaynak: '~/eklentiler/tost makinesi' }
  ]
}

Eklenti ekleme kodu, plugins/toaster.js dosyasındadır.

Eklentiyi kullanma

Bununla, eklentimiz kullanıma hazır! Eklentimizi çalışırken görmek için öncelikle sayfada tost bileşeninin bulunması gerekir. Ardından, mağazamızın $toaster.showToast() yöntemini çağırabilir ve content ve state parametrelerini iletebiliriz:

 this.$toaster.showToast({
  içerik: 'Başarıyla giriş yapıldı!',
  durum: 'başarı'
})

Çözüm

Bu makalede, Vue ve JavaScript kullanarak bir Nuxt uygulamasında global bir özel eklentinin nasıl oluşturulacağını öğrendik. Bu bileşeni, uygulamanızda farklı türde işlevler uygulamak için kullanabilirsiniz ve projenizin gereksinimlerine uyan bir açık kaynak eklentisi bulamadığınızda kullanışlı olur. Eklenti için bir bileşenin nasıl kullanılacağını ve eklentinin bir bileşene ihtiyacı olmadığında ne yapılacağını da tartıştık.

Bu öğretici için örneğimiz konsolda bir tarih görüntüleyerek oldukça basit bir işlevsellik gösterse de, bu projeyi geliştirmekten ve ihtiyaçlarınıza göre özelleştirmekten çekinmeyin. Nuxt eklentileri hakkında daha fazla bilgi için Nuxt Docs'a göz atmanızı tavsiye ederim. Mutlu bina!

Nuxt.js'de global bir özel eklenti nasıl oluşturulur yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Nuxt.js'de global bir özel eklenti nasıl oluşturulur?