欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3中Pinia的基本使用筆記

 更新時(shí)間：2022年10月13日 09:20:52   作者：blackzjj  
Pinia是一個(gè)全新的Vue狀態(tài)管理庫(kù),是Vuex的代替者,尤雨溪強(qiáng)勢(shì)推薦,下面這篇文章主要給大家介紹了關(guān)于Vue3中Pinia的基本使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

什么是Pinia呢？

Pina開始于大概2019，是一個(gè)狀態(tài)管理的庫(kù)，用于跨組件、頁面進(jìn)行狀態(tài)共享（這和Vuex、Redux一樣）,用起來像組合式API（Composition API）

Pinia和Vuex的區(qū)別

  • PInia的最初是為了探索Vuex的下一次迭代會(huì)是什么樣子，結(jié)合了Vuex核心團(tuán)隊(duì)討論中的許多想法；
  • 最終，團(tuán)隊(duì)意識(shí)到Pinia已經(jīng)實(shí)現(xiàn)了Vuex5中大部分內(nèi)容，所以最終決定用Pinia來替代Vuex；
  • 與Vuex相比，Pinia提供了一個(gè)更簡(jiǎn)單的API，具有更少的儀式，提供了Composition-API風(fēng)格的API
  • 更重要的是，與TypeScript一起使用時(shí)具有可靠的類型推斷支持

與Vuex相比，Pinia很多的優(yōu)勢(shì)：

比如mutations不再存在：

  • mutations最初是為devtools集成，但這不在是問題
  • 他們經(jīng)常認(rèn)為是非常冗長(zhǎng)

更友好的TpeScipt支持，Vuex之前對(duì)Ts的支持很不友好

不在有modules的嵌套結(jié)構(gòu)

  • 你可以靈活使用每一個(gè)store，他們是通過扁平化的方式來相互使用的;

不在有命名空間的概念，不在需要記住他們的復(fù)雜關(guān)系

如何使用Pinia

1、安裝Pinia

  • yarn add pinia
  • npm install pinia

2、創(chuàng)建pinia文件

store文件里index.js

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

3、main.js導(dǎo)入并引用

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'

createApp(App).use(pinia).mount('#app')

4、pinia的狀態(tài)管理，不同狀態(tài)可以區(qū)分不同文件

//定義關(guān)于counter的store
import { defineStore } from ‘pinia'

//defineStore 是返回一個(gè)函數(shù) 函數(shù)命名最好有use前綴，根據(jù)函數(shù)來進(jìn)行下一步操作
const useCounter = defineStore('counter',{
	state: () => {
		count:99
	}
})

export default useCounter

5、調(diào)用pinia，獲取pinia狀態(tài)值，導(dǎo)入Counter.js,獲取Counter.js里面state.count

<template>
  <div class="home">
    <h2>Home View</h2>
    <h2>count: {{ counterStore.count }}</h2>
  </div>
</template>

<script setup>
  import useCounter from '@/stores/counter';

  const counterStore = useCounter()

</script>

<style scoped>
</style>

注意：pinia解構(gòu)出來的state也是可以調(diào)用，但會(huì)失去響應(yīng)式，需要toRef或者pinia自帶storeToRefs

<template>
  <div class="home">
    <h2>Home View</h2>
    <h2>count: {{ counterStore.count }}</h2>
    <h2>count: {{ count }}</h2>
    <button @click="incrementCount">count+1</button>
  </div>
</template>

<script setup>
  import { toRefs } from 'vue'
  import { storeToRefs } from 'pinia'
  import useCounter from '@/stores/counter';

  const counterStore = useCounter()

  // const { count } = toRefs(counterStore)
  const { count } = storeToRefs(counterStore)


  function incrementCount() {
    counterStore.count++
  }

</script>

<style scoped>
</style>

store的核心部分：state，getter，action

（相當(dāng)于：data、computed、methods）

認(rèn)識(shí)和定義State

state是store的核心部分，因?yàn)閟tore是用來幫助我們管理狀態(tài)

操作State

1.讀取和寫入state：

默認(rèn)情況下，可以通過store實(shí)例訪問狀態(tài)來直接讀取和寫入狀態(tài)；

```
const counterStore = useCounter()

counterStore.counter++
counterStore.name = 'coderWhy'
```

2.重置State：

可以調(diào)用store上的$reset()方法將狀態(tài)重置到其初始值

const counterStore = useCounter()
conterStore.$reset()

3.改變State

  • 除了直接用store.counter++修改store，還可以調(diào)用$patch
  • 它允許您使用部分‘state’對(duì)象同時(shí)應(yīng)該多個(gè)修改
const counterStore = useCounter()

counterStore.$patch({
	counter:100,
	name:'kobe'
})

4.替換State

可以通過將其$state屬性設(shè)置為新對(duì)象替換Store的整個(gè)狀態(tài)

conterStore.$state = {
	counter:1,
	name:'why'
}

認(rèn)識(shí)和定義Getters

Getters相當(dāng)于Store的計(jì)算屬性：

  1. 它們可用defineStore()中的getters屬性定義
  2. getters中可以定義接受一個(gè)state作為參數(shù)的函數(shù)
expoer const useCounter = defineStore('counter',{
	state: () => {
		counter:100,
		firstname:'kobe'
	},
	getters:{
		doubleCounter(state){
			return state.counter *2
		}
	}
})

訪問Store里getters方法

1.訪問當(dāng)前store的getters：

const counterSotre = useCounter()
console.log(counterStore.doublCounter)

2.我們可以使用this來訪問當(dāng)前的store實(shí)例中g(shù)etters

expoer const useCounter = defineStore('counter',{
	state: () => {
		counter:100,
		firstname:'kobe'
	},
	getters:{
		doubleCounter(state){
			return state.counter *2
		}
		doubleCounterAdd(){
			//this指向store
			return this.doubleCounter +1 
		}
	}
})

3.訪問其它store的getters

import useUser from ./user

const userStore = useUser()

expoer const useCounter = defineStore('counter',{
	state: () => {
		counter:100,
		firstname:'kobe'
	},
	getters:{
	//調(diào)用其它Store
		doubleCounterUser(){
			return this.doubleCounter + userStore.umu
		}
	}
})

4.通過getters可以返回一個(gè)函數(shù)，可以傳參數(shù)

expoer const useCounter = defineStore('counter',{
	state: () => {
		counter:100,
		firstname:'kobe'
	},
	getters:{
	//調(diào)用其它Store
		doubleCounter(state){
			return function (is) {
				return state.id + id
			}
		}
	}
})

const StoreConter = useCounter();
//傳參
StoreCounter.doublCounter(111)

認(rèn)識(shí)和定義Actions

Actions 相當(dāng)于組件中的methods，可以使用defineStore()中的actions屬性定義

expoer const useCounter = defineStore('counter',{
	state: () => {
		counter:100,
		firstname:'kobe'
	},
	getters:{
	//調(diào)用其它Store
		doubleCounter(state){
			return function (is) {
				return state.id + id
			}
		}
	},
	actions:{
		increment(){
			this.counter++
		},
		//傳參
		incrementnum(num){
			this。counter += num
		}
	}
})

和getters一樣，在action中可以通過this訪問整個(gè)store實(shí)例：

function increment(){
	//調(diào)用
	counterStore.increment()
}
function incrementnum(){
	counterStore.increment(10)
}

Actions執(zhí)行異步操作：

Actions中是支持異步操作的，并且我們可以編寫異步函數(shù)，在函數(shù)中使用await

actions:{
	async fetchHome(){
		//???請(qǐng)求
		const res = await fetch('?????')
		const data = await res.json()
		console.log('data',data)
		return data
	}
}

cosnt counterStore = useCounter

counterStore.fetchHome().then(res => {
	console.log(res)
})

 總結(jié)

到此這篇關(guān)于Vue3中Pinia基本使用的文章就介紹到這了,更多相關(guān)Vue3 Pinia使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論