Vue新的狀態(tài)管理庫(kù)Pinia入門教程
作者：前端亦可行
為什么最近Pinia會(huì)火起來(lái)呢，主要在于Vue3推出來(lái)的時(shí)候，Vuex對(duì)于Vue3的組合式Api支持的不是特別好，也就是在這個(gè)時(shí)候Pinia出現(xiàn)了。
前沿
Vue官方推薦的狀態(tài)管理庫(kù)是Vuex，那為什么最近Pinia會(huì)火起來(lái)呢，主要在于Vue3推出來(lái)的時(shí)候，Vuex對(duì)于Vue3的組合式Api支持的不是特別好，也就是在這個(gè)時(shí)候Pinia出現(xiàn)了，最重要的是，Pinia不但支持Vue3，同時(shí)還支持Vue2，這就厲害了，而且最新Vuex5的特性還是參考的Pinia
使用教程
官網(wǎng)：https://pinia.vuejs.org/
github地址：https://github.com/vuejs/pinia
1、安裝
npm install pinia -S
2、vue中引入
// Vue3中引入使用
import { createPinia } from 'pinia'
app.use(createPinia())
//Vue2中引入使用
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
el: '#app',
// 其它配置項(xiàng)
pinia,
})
3、基本使用
// 定義store
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
// 狀態(tài)值定義
state: () => {
return { count: 0 }
},
// 狀態(tài)更改方法定義
actions: {
increment() {
this.count++
},
},
})
// 在組件中使用
// 導(dǎo)入狀態(tài)
import { useCounterStore } from '@/stores/counter'
export default {
setup() {
// 初始化一個(gè)store實(shí)例
const counter = useCounterStore()
// state更新
counter.count++
// 或者調(diào)用方法更新
counter.increment()
},
}
4、也可以像vuex一樣使用
const useCounterStore = defineStore('counter', {
// 狀態(tài)值
state: () => ({ count: 0 }),
// getter值
getters: {
double: (state) => state.count * 2,
},
// actions方法
// 注意pinia里沒(méi)有mutation
actions: {
increment() {
this.count++
}
}
})
// 定義另外一個(gè)store
const useUserStore = defineStore('user', {
// ...
})
export default {
// computed里引入使用state里的值
computed: {
...mapStores(useCounterStore, useUserStore)
...mapState(useCounterStore, ['count', 'double']),
},
// methods里使用action
methods: {
...mapActions(useCounterStore, ['increment']),
},
}
好了，Pinia的入門教程就講到這，是不是語(yǔ)法更加簡(jiǎn)潔
責(zé)任編輯：姜華
來(lái)源：
今日頭條
