Vue新的狀態(tài)管理庫(kù)Pinia入門教程
為什么最近Pinia會(huì)火起來呢，主要在于Vue3推出來的時(shí)候，Vuex對(duì)于Vue3的組合式Api支持的不是特別好，也就是在這個(gè)時(shí)候Pinia出現(xiàn)了。
前沿
Vue官方推薦的狀態(tài)管理庫(kù)是Vuex，那為什么最近Pinia會(huì)火起來呢，主要在于Vue3推出來的時(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的入門教程就講到這，是不是語法更加簡(jiǎn)潔
到此這篇關(guān)于Vue新的狀態(tài)管理庫(kù)Pinia入門教程的文章就介紹到這了,更多相關(guān)Vue Pinia內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
甘特圖是一種條狀圖,直觀展示項(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)圖片粘貼上傳,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
最近發(fā)現(xiàn)很多要求Vue3的技術(shù)了,不得不說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)航組件問題，具有很好的參考價(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)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
laravel+vue組合的項(xiàng)目中引入ueditor方式(打包成組件形式)
今天小編就為大家分享一篇laravel+vue組合的項(xiàng)目中引入ueditor方式(打包成組件形式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例
下面小編就為大家分享一篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(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