Vue3 telah dikeluarkan untuk beberapa lama dan ia menggunakan yang baharu sistem responsif, dan membina Composition API serba baharu. Ekosistem sekeliling Vue sedang meningkatkan usahanya untuk menyesuaikan diri dengan sistem baharu ini, dan perpustakaan pengurusan negeri rasmi Vuex juga sedang menyesuaikan diri Atas sebab ini, pegawai itu telah mengemukakan cadangan baharu untuk Vuex 5. [Cadangan berkaitan: "Tutorial vue.js"]
- menyokong dua sintaks untuk membuat Kedai:
Options ApidanComposition Api; - Padam
mutations, hanya sokongstate,getters,actions; - reka bentuk modular, boleh menyokong pemisahan kod
- Tiada modul Bersarang sahaja mempunyai konsep Kedai;
- Lengkap
TypeScriptsokongan;
Di bawah cadangan ini, terdapat ulasan yang menarik. Terjemahan mudah:
Alangkah kebetulannya, cadangan Vuex5 tidak boleh dikatakan tiada kaitan dengan fungsi yang dilaksanakan oleh Pinia, ia hanya boleh dikatakan tepat sama. Artikel hari ini akan memberi anda Izinkan saya memperkenalkan nanas ini.
Pemasangan
Dalam projek sedia ada, arahan berikut telah digunakan untuk memasang modul Pinia.
# yarn yarn add pinia@next # npm npm i pinia@next
Selepas pemasangan selesai, anda perlu mengimport dan memasangnya dalam fail kemasukan projek Vue3.
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 实例化 Vue
const app = createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount('#app')Bermula
Untuk menggunakan Pinia, anda hanya perlu mentakrifkan kedai dan kemudian mengimportnya di tempat data digunakan.
Define Store
import { defineStore } from "pinia"
// 对外部暴露一个 use 方法，该方法会导出我们定义的 state
const useCounterStore = defineStore({
// 每个 store 的 id 必须唯一
id: 'counter',
// state 表示数据源
state: () => ({
count: 0
}),
// getters 类似于 computed，可对 state 的值进行二次计算
getters: {
double () {
// getter 中的 this 指向 state
return this.count * 2
},
// 如果使用箭头函数会导致 this 指向有问题
// 可以在函数的第一个参数中拿到 state
double: (state) => {
return state.count * 2
}
},
// actions 用来修改 state
actions: {
increment() {
// action 中的 this 指向 state
this.count++
},
}
})
export default useCounterStoreSelain menggunakan kaedah seperti vuex di atas untuk membina keadaan, anda juga boleh menggunakan borang function untuk mencipta kedai , yang agak serupa dengan Vue3 setup() dalam .
import { ref, computed } from "vue"
import { defineStore } from "pinia"
// 对外部暴露一个 use 方法，该方法会导出我们定义的 state
const useCounterStore = defineStore('counter', function () {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
return {
count, double, increment
}
})
export default useCounterStoreMenggunakan Kedai
Seperti yang dinyatakan sebelum ini, Pinia menyediakan dua cara untuk menggunakan kedai, kedua-dua Options Api dan Composition Api disokong dengan sempurna.
Pilihan Api
Dalam Options Api, anda boleh terus menggunakan kaedah mapActions dan mapState yang disediakan secara rasmi untuk mengeksport keadaan, pengambil dan tindakan dalam kedai , penggunaannya pada asasnya sama seperti Vuex, dan ia mudah untuk dimulakan.
import { mapActions, mapState } from 'pinia'
import { useCounterStore } from '../model/counter'
export default {
name: 'HelloWorld',
computed: {
...mapState(useCounterStore, ['count', 'double'])
},
methods: {
...mapActions(useCounterStore, ['increment'])
}
}Komposisi Api
Composition Api, kedua-dua keadaan dan pengambil perlu mendengar perubahan melalui kaedah computed, yang sama seperti dalam Options Api , ia perlu diletakkan di dalam objek computed atas sebab yang sama. Di samping itu, nilai keadaan yang diperolehi dalam Options Api boleh diubah suai secara langsung Sudah tentu, adalah disyorkan untuk menulis tindakan untuk mengendalikan nilai keadaan untuk memudahkan penyelenggaraan kemudian.
// Composition Api
import { computed } from 'vue'
import { useCounterStore } from '../stores/counter'
export default {
name: 'HelloWorld',
setup() {
const counter = useCounterStore()
return {
// state 和 getter 都需要在使用 computed，这和 Options Api 一样
count: computed(() => counter.count),
double: computed(() => counter.double),
increment: () => { counter.count++ }, // 可以直接修改 state 的值
increment: counter.increment, // 可以引用 store 中定义的 action
}
}
}Petua jenis
Dalam Vuex, pembayang jenis TypeScript tidak begitu baik semasa melakukan terbitan jenis, hanya keadaannya yang boleh ditemui. Terutama dalam proses menulis kod, gesaan kod sangat tidak bijak.
Dan pinia boleh menyimpulkan semua keadaan, pengambil dan tindakan yang ditentukan, yang akan menjadi lebih mudah semasa menulis kod.
Terutamanya kerana pinia mempunyai definisi jenis yang sangat mesra melalui TypeScript Jika anda berminat, anda boleh melihat definisi jenis pinia fail (pinia.d.ts):
Pemisahan Kod
Disebabkan reka bentuk modular, semua kedai boleh diperkenalkan secara berasingan dan bukannya Seperti vuex, semua modul dipasang pada kedai melalui modul.
Andaikan kita buat masa ini Kedai melalui Vuex Terdapat dua modul di bawah Kedai ini, iaitu modul pengguna (Pengguna) dan modul produk (Barang). Walaupun halaman utama semasa hanya menggunakan maklumat pengguna, keseluruhan Kedai akan dibungkus ke dalam bahagian js halaman utama.
Jika kami menggunakan pinia, kami akan menggunakan defineStore untuk mentakrifkan dua kedai yang berasingan sepenuhnya Apabila dua halaman itu diperkenalkan, ia tidak akan menjejaskan satu sama lain. Semasa pembungkusan akhir, bahagian js halaman utama dan bahagian js halaman produk masing-masing akan dibungkus ke dalam kedai yang sepadan.
Pengenalan Pinia tamat di sini Jika ada projek baru yang akan dibangunkan menggunakan Vue3, adalah disyorkan untuk menggunakan Pinia tanpa sebarang otak dan hanya bersaiz 1KB.
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !
