Penjelasan Tentang Pinia Dan Nuxt 3

Pinia sekarang menjadi pilihan yang direkomendasikan oleh Vue dan sekarang menjadi bagian resmi dari keseluruhan ekosistem Vue, maintained dan dikembangkan oleh anggota inti tim Vue

Membuat proyek baru

npx nuxi init nuxt3-pinia

Instal pinia

npm i @pinia/nuxt pinia -D

tambahkan modul ke nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    // ...
    '@pinia/nuxt',
  ],
});

Membuat store todo

buat folder penyimpanan di root proyek, lalu buat file todos.ts, kami akan memanggil https://jsonplaceholder.typicode.com/todos ini adalah API tiruan yang mengembalikan daftar todos

Sebelum masuk ke konsep inti, kita perlu tahu bahwa store didefinisikan menggunakan defineStore() dan memerlukan nama yang unik, diteruskan sebagai argumen pertama:

store/todos.ts

import { defineStore } from 'pinia';
export const useTodosStore = defineStore('todos', {});

Di Pinia, status didefinisikan sebagai fungsi yang mengembalikan status awal. Ini memungkinkan Pinia untuk bekerja di Server dan Sisi Klien.

mari buat status todo kosong

state: () => ({
    todos: [],
  }),

Sekarang mari kita buat tindakan, yang akan memanggil titik akhir di atas untuk mengambil daftar todos dan menetapkan data ke status todos

Tindakan setara dengan metode dalam komponen. Mereka bisa didefinisikan dengan properti tindakan di defineStore() dan mereka sempurna untuk mendefinisikan logika bisnis:

async fetchTodos() {
      const { data } = await useFetch('https://jsonplaceholder.typicode.com/todos'); 
      if (data.value) {
        this.todos = data.value;
      }
  }

Nuxt 3 menyediakan composable baru yang disebut useFetch. Ini memungkinkan kita melakukan panggilan GET tanpa harus menginstal axios

kode yang sudah selesai sekarang untuk store/todos.ts

import { defineStore } from 'pinia';

export const useTodosStore = defineStore('todos', {
  state: () => ({
    todos: [],
  }),
  actions: {
    async fetchTodos() {
      const { data }: any = await useFetch('https://jsonplaceholder.typicode.com/todos');
      if (data.value) {
        this.todos = data.value;
      }
    },
  },
});

Cara menggunakan store todos

buka app.vue kita sekarang perlu mengimpor fungsi fetchTodos kita dari store

import { useTodosStore } from '~/store/todos';

saat ini kita perlu merusak penyimpanan kita dan memanggil tindakan, menyatakan yang kita butuhkan, merusak penyimpanan akan merusak reaktivitas.

const { fetchTodos, todos } = useTodosStore();

untuk mempertahankan reaktivitas kita bisa menggunakan properti yang dihitung atau storeToRefs()

Reaktivitas dengan dihitung

gunakan properti yang dihitung untuk membuat status todos reaktif

const store = useTodosStore();

const todos =  computed(() => store.todos)

Reaktivitas dengan storeToRefs()

storeToRefs() memungkinkan kita merusak nilai store sekaligus menjaganya tetap reaktif

import { storeToRefs } from 'pinia'

const store = useTodosStore();
const { todos,} = storeToRefs(store)

bagaimana dengan fungsi

storeToRefs tidak mengizinkan kita untuk merusak fungsi, kita cukup memanggil tindakan dengan store.fetchTodos atau kita dapat merusak nilai store

import { storeToRefs } from 'pinia'

const store = useTodosStore();
const { fetchTodos } = store; // have all non reactiave stuff here 
const { todos } = storeToRefs(store) // have all reactive states here

karena Nuxt 3 mendukung async/menunggu tingkat atas, kami hanya dapat memanggil tindakan fetchTodos

await fetchTodos();

sekarang di html kita, bisakah kita mengulang todo dan menampilkan masing-masing

<template>
  <div>
    <h1>Todos:</h1>
    <ul v-for="todo in todos" :key="todo.id">
      <li>{{ todo.title }}</li>
    </ul>
  </div>
</template>

sekarang kita akan melihat daftar todos

kode lengkap untuk app.vue

<template>
  <div>
    <h1>Todos:</h1>
    <ul v-for="todo in todos" :key="todo.id">
      <li>{{ todo.title }}</li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useTodosStore } from '~/store/todos';
const store = useTodosStore();
const { fetchTodos } = store; // have all non reactiave stuff here
const { todos } = storeToRefs(store); // have all reactive states here
await fetchTodos();
</script>

Alternatif lain mendirikan store pinia

import { defineStore } from 'pinia';
export const useTodosStore = defineStore('todos', () => {
  const todos = ref([]);  // ref by defaults are states,
 // functions get added to actions
  const fetchTodos = async () => { 
    const { data }: any = await useFetch('https://jsonplaceholder.typicode.com/todos');
    if (data.value) {
      todos.value = data.value;
    }
  };
// we must return what we want to use accross the application
  return {
    todos,
    fetchTodos,
  };
});

Cara menyiapkan store ini terasa seperti cara yang sangat familiar dalam membuat komposisi di vue