VueJS 3: Status Global dengan API Komposisi

API Komposisi baru memungkinkan Anda menyingkirkan penyimpanan Vuex. Mari kita lihat contoh sederhana bagaimana mencapai ini. Dan pertimbangkan pro dan kontra.

Contoh

Mari kita ambil contoh penghitung di Vuex dari dokumentasi -toko-paling sederhana dan menerapkannya menggunakan API komposisi.



Modul modul penghitung / penghitung:

import { ref } from 'vue'

const counter = ref(0)

export default function useCounter () {
  const increment = () => {
    counter.value++
  }
  return { counter, increment }
}

Perhatikan bahwa variabel counter berada di luar fungsi useCounter (). Jadi, ketika fungsi useCounter dipanggil dalam komponen yang berbeda, penghitung akan merujuk ke contoh yang sama. Dan inilah yang kami butuhkan.



Menggunakan penghitung kami di berbagai komponen sederhana:

<template>
    <div>
      {{ counter }}
    </div>
   <button @click="increment">+</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useCounter from '@/modules/useCounter'

export default defineComponent({
  name: 'App',
  setup () {
    const { counter, increment } = useCounter()
    return { counter, increment }
  }
})
</script>

Untuk menggunakan penghitung global, Anda hanya perlu mengimpor useCounter ke dalam modul yang diperlukan dan menggunakannya.



Jika Anda perlu membatasi akses ke variabel counter, Anda tidak dapat mengekspornya, tetapi fungsi getter:

import { ref, computed } from 'vue'

const counter = ref(0)
const getCounter = computed(() => counter.value)
const increment = () => counter.value++

export default function useCounter () {
  return { getCounter, increment }
}

Pro dan kontra

Salah satu hal hebat tentang Vuex bekerja dengan Vue.js devtools. Sangat mudah untuk melihat seluruh status global dalam bentuk pohon, melihat panggilan ke mutasi dengan variabel yang diteruskan, dan juga dapat memutar kembali ke status yang berbeda. Bagaimana komposisi API akan didukung di Vue.js devtools masih belum jelas, pekerjaan masih berlangsung.



Struktur Vuex - pengambil, mutasi, tindakan - mungkin terdengar mubazir secara sintaksis, tetapi memungkinkan presentasi dan pemisahan kerja modul penyimpanan yang jelas dan lebih merupakan nilai plus daripada minus. Dan saat menggunakan API komposisi, pengembang memutuskan semuanya sendiri, dia bisa membuat permen, atau mungkin tidak.



Dukungan TypeScript adalah titik lemah di Vuex. Semua artikel yang mencoba mengetik Vuex terlihat menakutkan. Dan begitulah cara Vuex verbose menjadi sangat bertele-tele. Jika kita menggunakan API komposisi, ini lebih sederhana, gunakan TypeScript seperti biasa.



Vuex terhubung sebagai plugin dan tersedia di setiap komponen melalui ini. $ Store. Dalam kasus API komposisi, kita perlu mengimpor modul. Tidak banyak perbedaan, dan kedua pendekatan memungkinkan Anda bekerja dengan keadaan global.



Sebaliknya, menggunakan API komposisi, membebaskan kita dari ketergantungan yang tidak perlu dan memungkinkan kita untuk mengatur keadaan global sesuai keinginan. Di sisi lain, pertanyaan tentang pengujian tetap ada. Modul global itu sendiri mudah untuk diuji, tetapi modul yang menggunakannya sudah lebih sulit untuk diuji.

Kesimpulan

Belum jelas apakah layak untuk meninggalkan Vuex, tetapi pasti ada alat baru yang memungkinkan Anda untuk menyelesaikan masalah yang diselesaikan oleh Vuex. Segera akan jelas pendekatan mana yang lebih baik, dan dalam kasus apa. Sementara itu, developer Vuex belum mengumumkan tentang project folding dan melihatnya seperti sebelumnya, dan di dokumentasi Vue3 masih terdapat link ke Vuex.