Apa itu pinia? Bagaimana untuk menggunakannya dalam Vue?

Apakah pinia? Mengapa menggunakan Pinia? Artikel ini akan memperkenalkan anda kepada pinia dan memperkenalkan penggunaan asas pinia melalui contoh-contoh saya harap ia akan membantu anda!

Apakah Pinia?

Pinia pada asalnya merupakan percubaan sekitar November 2019 untuk mereka bentuk semula rupa dan rasa Kedai Vue menggunakan API Komposisi. Sejak itu, prinsip asal tetap sama, tetapi Pinia berfungsi dengan Vue 2 dan Vue 3 dan tidak memerlukan anda menggunakan API gubahan . API untuk kedua-duanya adalah sama kecuali untuk Memasang dan SSR dan dokumentasi adalah untuk Vue 3, dengan menyediakan nota pada Vue 2 jika perlu untuk pengguna Vue 2 dan Vue 3 boleh baca! 【Cadangan berkaitan: tutorial video vue.js】

Mengapa menggunakan Pinia?

Pinia ialah repositori untuk Vue yang membolehkan anda berkongsi keadaan merentas komponen/halaman. ç Ini benar untuk aplikasi satu halaman, tetapi jika ia dipaparkan di sebelah pelayan, ia mendedahkan aplikasi anda kepada kelemahan keselamatan. Tetapi walaupun dalam aplikasi satu halaman kecil, anda boleh mendapat banyak faedah daripada menggunakan Pinia:

• Sokongan alatan pembangunan

  • Jejak tindakan , garis masa mutasi
  • kedai muncul dalam komponen yang menggunakannya
  • perjalanan masa dan penyahpepijatan yang lebih mudah

• penggantian modul panas

  • Ubah suai kedai anda tanpa memuatkan semula halaman
  • Kekalkan sebarang keadaan sedia ada semasa membangunkan

• Pemalam: Gunakan pemalam untuk melanjutkan fungsi Pinia

• menyediakan pengguna JS sokongan TypeScript yang betul atau fungsi autolengkap

• sokongan pemaparan Sisi pelayan

Contoh asas

Inilah yang kelihatan seperti penggunaan pinia dari segi API (pastikan anda menyemak Bermula untuk mendapatkan arahan penuh). Anda mula-mula membuat kedai:

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

kemudian dalam komponen gunakan ia:

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // with autocompletion ✨
    counter.$patch({ count: counter.count + 1 })
    // or using an action instead
    counter.increment()
  },
}

Anda juga boleh menggunakan fungsi (serupa dengan komponen setup()) untuk menentukan Kedai bagi kes penggunaan yang lebih lanjut:

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

Jika anda masih tidak biasa dengan setup()API Komposisi, jangan risau, Pinia juga menyokong set peta Helper, seperti Vuex. Anda mentakrifkan storan dengan cara yang sama, tetapi kemudian gunakan , mapStores() atau mapState(): mapActions()

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

const useUserStore = defineStore('user', {
  // ...
})

export default {
  computed: {
    // other computed properties
    // ...
    // gives access to this.counterStore and this.userStore
    ...mapStores(useCounterStore, useUserStore)
    // gives read access to this.count and this.double
    ...mapState(useCounterStore, ['count', 'double']),
  },
  methods: {
    // gives access to this.increment()
    ...mapActions(useCounterStore, ['increment']),
  },
}

Anda akan menemui lebih lanjut tentang setiap

pembantu peta dalam maklumat Konsep Teras.

Mengapa

Piña

Pinia (sebutan

, seperti "peenya" dalam bahasa Inggeris) adalah yang paling hampir dengan /piːnjʌ/piña (nanas dalam bahasa Sepanyol), iaitu nama pakej yang sah. Nanas sebenarnya adalah sekumpulan bunga individu yang bergabung untuk membentuk berbilang buah. Sama seperti kedai, masing-masing dilahirkan secara bebas, tetapi akhirnya semuanya disambungkan. Ia juga merupakan buah tropika yang lazat yang berasal dari Amerika Selatan.

Contoh yang lebih realistik

Ini ialah contoh API yang lebih lengkap yang akan anda gunakan jenis dalam Pinia

walaupun dalam JavaScript. Bagi sesetengah orang, ini mungkin cukup untuk bermula tanpa membaca lanjut, tetapi kami masih mengesyorkan agar anda menyemak dokumentasi yang lain atau melangkau contoh ini dan membaca semua Konsep Teras pulangan.

import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
  state: () => ({
    /** @type {{ text: string, id: number, isFinished: boolean }[]} */
    todos: [],
    /** @type {'all' | 'finished' | 'unfinished'} */
    filter: 'all',
    // type will be automatically inferred to number
    nextId: 0,
  }),
  getters: {
    finishedTodos(state) {
      // autocompletion! ✨
      return state.todos.filter((todo) => todo.isFinished)
    },
    unfinishedTodos(state) {
      return state.todos.filter((todo) => !todo.isFinished)
    },
    /**
     * @returns {{ text: string, id: number, isFinished: boolean }[]}
     */
    filteredTodos(state) {
      if (this.filter === 'finished') {
        // call other getters with autocompletion ✨
        return this.finishedTodos
      } else if (this.filter === 'unfinished') {
        return this.unfinishedTodos
      }
      return this.todos
    },
  },
  actions: {
    // any amount of arguments, return a promise or not
    addTodo(text) {
      // you can directly mutate the state
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})

Perbandingan dengan Vuex

Pinia cuba sehampir mungkin dengan falsafah Vuex. Ia direka bentuk untuk menguji cadangan untuk lelaran Vuex yang seterusnya, dan ia berjaya kerana pada masa ini kami mempunyai RFC terbuka untuk Vuex 5 dengan API yang hampir sama dengan apa yang Pinia gunakan

. Sila ambil perhatian bahawa saya (Eduardo), pengarang Pinia, adalah sebahagian daripada pasukan teras Vue.js dan mengambil bahagian secara aktif dalam reka bentuk API seperti Router dan Vuex. Hasrat peribadi saya dengan projek ini adalah untuk mereka bentuk semula pengalaman menggunakan kedai global sambil mengekalkan falsafah Vue yang mudah didekati. Saya memastikan API Pinia hampir dengan Vuex kerana ia terus bergerak ke hadapan untuk memudahkan orang ramai berhijrah ke Vuex malah menggabungkan kedua-dua projek (di bawah Vuex) pada masa hadapan.

RFC

Sementara Vuex mengumpul sebanyak mungkin maklum balas daripada komuniti melalui RFC, Pinia tidak melakukannya. Saya menguji idea berdasarkan pengalaman saya membangunkan apl, membaca kod orang lain, bekerja untuk pelanggan menggunakan Pinia dan menjawab soalan tentang Discord. Ini membolehkan saya menyediakan penyelesaian yang cekap yang berfungsi untuk pelbagai situasi dan saiz aplikasi. Saya kerap mengeluarkan dan memastikan perpustakaan berkembang sambil mengekalkan API terasnya tidak berubah.

Perbandingan dengan Vuex 3.x/4.x

Vuex 3.x ialah Vue 2 daripada Vuex dan Vuex 4.x ialah Vue 3

API Pinia jauh berbeza daripada Vuex ≤4, iaitu:

• Mutasi tidak wujud lagi. Mereka sering dianggap sangat verbose. Mereka pada asalnya membawa penyepaduan devtools, tetapi itu bukan lagi masalah.
• Tidak perlu membuat pembalut kompleks tersuai untuk menyokong TypeScript, semuanya ditaip dan API direka bentuk dengan cara untuk memanfaatkan inferens jenis TS apabila boleh.
• Tiada lagi menyuntik rentetan ajaib, mengimport fungsi, memanggilnya, menikmati autolengkap!
• Tidak perlu menambah kedai secara dinamik, semuanya dinamik secara lalai dan anda tidak akan perasan. Harap maklum bahawa anda masih boleh mendaftar secara manual menggunakan kedai pada bila-bila masa, tetapi kerana ia automatik, anda tidak perlu risau.
• tidak lagi mempunyai struktur bersarang modul. Anda masih boleh membuat sarang kedai secara tersirat dengan mengimport dan menggunakan kedai dalam kedai lain, tetapi Pinia menyediakan struktur rata mengikut reka bentuk sambil tetap menyokong gabungan silang antara kedai. Anda juga boleh mempunyai kebergantungan bulat pada kedai .
Modul
• tanpa ruang nama. Memandangkan seni bina kedai yang rata, kedai "ruang nama" adalah wujud dengan cara ia ditakrifkan, dan anda boleh mengatakan bahawa semua kedai adalah ruang nama.

Untuk mendapatkan arahan yang lebih terperinci tentang cara menukar projek Vuex ≤4 sedia ada kepada menggunakan Pinia, lihat

panduan Migrasi daripada Vuex.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Apa itu pinia? Bagaimana untuk menggunakannya dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!