Pinia-Cheat-Sheet - PINNA - Nhập môn Công nghệ phần mềm | Trường Đại học Khoa học Tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh

import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')

Tài liệu được sưu tầm giúp bạn tham khảo, ôn tập và đạt kết quả cao trong kì thi sắp tới. Mời bạn đọc đón xem !

32 16 lượt tải Tải xuống
Chia sẻ Báo cáo tài liệu

Môn: Nhập môn Công nghệ phần mềm (HCMUS)

Trường: Trường Đại học Khoa học tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh

Thông tin:

3 trang 1 tháng trước

Tác giả:

Profile Phạm Thị Huyền
lOMoARcPSD|46958826
Vue Mastery
Initialize Pinia for your app
lOMoARcPSD|46958826
src/main.js
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')
Define the store
src/stores/ProductStore.js
import { defineStore } from 'pinia'
export const useProductStore = defineStore('product', {
a unique name
state: () => ({
products: [ Product , Product , Product ]
initialize the state
}),
getters: {
getters can access the state
productCount(state) {
through the parameter
return state.products.length
},
productsCheaperThan(state) {
return (price) => (
a getter can accept an argument, but
it has to return a function instead
state.products.filter(product =>
product.price < price
)
)
}
change the state with actions
},
actions: {
addProduct( Product ) {
this.products.push( Product )
}
}
access the state with this
})t
Use the store (Composition API)
src/App.vue
<script setup>
import { useProductStore } from './stores/ProductStore'
const store =
useProductStore()
</script> <template>
<ul>
<li v-for="product in store.products">
...
</li>
</ul>
<p>{{ store.productCount
}}</p> <ul>
<li v-for="product in store.productsCheaperThan(10)">
...
</li>
use the action </ul>
<button @click="store.addProduct( Product )">Add</button>
use a getter that takes an argument
use a getter
create a store instance
access the state directly
lOMoARcPSD|46958826
Vue Mastery
Use the store (Options API)
<script>
import { useProductStore } from './stores/ProductStore'
import { mapStores } from 'pinia'
export default {
import the mapStore function
computed: {
...mapStores(useProductStore)
}
map the store as a
}
</script>
computed property
<template>
<ul>
<li v-for="product in productStore.products">
this name is the combination
...
of the store’s unique name
</li>
“product” + “Store”. It is created
</ul>
<p>{{ productStore.productCount }}</p>
by mapStores.
<ul>
<li v-for="product in productStore.productsCheaperThan(10)">
...
</li>
</ul>
<button @click="productStore.addProduct( Product )">Add</button>
Change the state without actions
store.x = 1
change one thing
store.$patch({ x: 1, y: 2})
change multiple things
store.$patch(state => {
state.x = 1
state.y = 2
})
alternate syntax
store.$state = { x: 1, y: 2, z: 3 }
change the entire state
store.$reset()
change the entire state back to the initial values
Subscribe to changes
store.$subscribe((mutation, state) => {
... the state after the change
})
details on how the change was made
Learn Pinia now with remium courses on VueMastery.com Visit
VueMastery.com to explore our library of Vue courses.
| 1/3
| | Tải xuống

Có thể bạn quan tâm:

Preview text:

lOMoARcPSD|46958826 lOMoARcPSD|46958826 Vue Mastery src/main.js
Initialize Pinia for your app
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app') Define the store src/stores/ProductStore.js
import { defineStore } from 'pinia'
export const useProductStore = defineStore('product', { a unique name state: () => ({
products: [ Product , Product , Product ]
initialize the state }), getters: {
getters can access the state productCount(state) { through the parameter return state.products.length }, productsCheaperThan(state) { return (price) => (
a getter can accept an argument, but
state.products.filter(product =>
it has to return a function instead product.price < price ) ) }
change the state with actions }, actions: { addProduct( Product ) {
this.products.push( Product ) } }
access the state with this })t
Use the store (Composition API) src/App.vue use a getter


use a getter that takes an argument ...

{{ store.productCount }}

  • ...

use the action Product )">Add lOMoARcPSD|46958826 Vue Mastery
Use the store (Options API) computed property


  • this name is the combination ...
    of the store’s unique name

“product” + “Store”. It is created

{{ productStore.productCount }}

by mapStores.

  • ...

Product )">Add
Change the state without actions store.x = 1 change one thing store.$patch(state => { state.x = 1 state.y = 2 store.$patch({ x: 1, y: 2}) change multiple things }) alternate syntax
store.$state = { x: 1, y: 2, z: 3 } change the entire state store.$reset()
change the entire state back to the initial values Subscribe to changes
store.$subscribe((mutation, state) => { ...
the state after the change })
details on how the change was made
Learn Pinia now with remium courses on VueMastery.com Visit
VueMastery.com to explore our library of Vue courses.