Vue新的狀態(tài)管理庫(kù)Pinia入門教程

更新時(shí)間：2022年02月23日 09:24:18 作者：前端亦可行

Pinia不但支持Vue3，同時(shí)還支持Vue2，本文主要介紹了Vue新的狀態(tài)管理庫(kù)Pinia入門教程，具有一定的參考價(jià)值，感興趣的可以了解下

前沿

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里沒有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)潔

到此這篇關(guān)于Vue新的狀態(tài)管理庫(kù)Pinia入門教程的文章就介紹到這了,更多相關(guān)Vue Pinia內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
Pinia

相關(guān)文章

Vue echarts繪制甘特圖的示例代碼
甘特圖是一種條狀圖,直觀展示項(xiàng)目進(jìn)展隨時(shí)間的走勢(shì)及聯(lián)系,其中,項(xiàng)目時(shí)間由橫軸表示,項(xiàng)目活動(dòng)由縱軸表示,本文給大家介紹了Vue echarts繪制甘特圖的實(shí)現(xiàn)方法,并有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2024-03-03
vue3中element-plus?icon圖標(biāo)的正確使用姿勢(shì)
element-plus官方提示,Icon圖標(biāo)正在向SVG?Icon遷移,之前使用的Font?Icon即將被棄用,下面這篇文章主要給大家介紹了關(guān)于vue3中element-plus?icon圖標(biāo)的正確使用姿勢(shì),需要的朋友可以參考下
2022-03-03
vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07
由淺入深講解vue2和vue3的區(qū)別
最近發(fā)現(xiàn)很多要求Vue3的技術(shù)了,不得不說(shuō)it技術(shù)的更新真的太快了,作為vue2老用戶,我們?cè)趯W(xué)習(xí)Vue3前應(yīng)該了解他們的區(qū)別以及背后的原因,下面這篇文章主要給大家介紹了關(guān)于vue2和vue3區(qū)別的相關(guān)資料,需要的朋友可以參考下
2023-02-02
vue?底部footer導(dǎo)航組件問題
這篇文章主要介紹了vue?底部footer導(dǎo)航組件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue將秒數(shù)轉(zhuǎn)成"時(shí)分秒"格式實(shí)例代碼
在項(xiàng)目中,請(qǐng)求后臺(tái)接口返回的值是秒,這篇文章主要給大家介紹了關(guān)于vue將秒數(shù)轉(zhuǎn)成"時(shí)分秒"格式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
laravel+vue組合的項(xiàng)目中引入ueditor方式(打包成組件形式)
今天小編就為大家分享一篇laravel+vue組合的項(xiàng)目中引入ueditor方式(打包成組件形式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例
下面小編就為大家分享一篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue使用swiper.js重疊輪播組建樣式
這篇文章主要為大家詳細(xì)介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09