<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • <>什么是Pinia呢?

    Pina開始于大概2019,是一個狀態管理的庫,用于跨組件、頁面進行狀態共享(這和Vuex、Redux一樣),用起來像組合式API(Composition
    API)

    <>Pinia和Vuex的區別

    * PInia的最初是為了探索Vuex的下一次迭代會是什么樣子,結合了Vuex核心團隊討論中的許多想法;
    * 最終,團隊意識到Pinia已經實現了Vuex5中大部分內容,所以最終決定用Pinia來替代Vuex;
    * 與Vuex相比,Pinia提供了一個更簡單的API,具有更少的儀式,提供了Composition-API風格的API
    * 更重要的是,與TypeScript一起使用時具有可靠的類型推斷支持
    <>與Vuex相比,Pinia很多的優勢:

    比如mutations不再存在:

    * mutations最初是為devtools集成,但這不在是問題
    * 他們經常認為是非常冗長
    更友好的TpeScipt支持,Vuex之前對Ts的支持很不友好

    不在有modules的嵌套結構

    * 你可以靈活使用每一個store,他們是通過扁平化的方式來相互使用的;
    不在有命名空間的概念,不在需要記住他們的復雜關系

    <>如何使用Pinia

    1、安裝Pinia

    * yarn add pinia
    * npm install pinia
    2、創建pinia文件

    store文件里index.js
    import { createPinia } from 'pinia' const pinia = createPinia() export default
    pinia

    3、main.js導入并引用
    import { createApp } from 'vue' import App from './App.vue' import pinia from
    './stores' createApp(App).use(pinia).mount('#app')

    4、pinia的狀態管理,不同狀態可以區分不同文件

    //定義關于counter的store import { defineStore } from ‘pinia’ //defineStore 是返回一個函數
    函數命名最好有use前綴,根據函數來進行下一步操作 const useCounter = defineStore('counter',{ state: ()
    => { count:99 } }) export default useCounter
    5、調用pinia,獲取pinia狀態值,導入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解構出來的state也是可以調用,但會失去響應式,需要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

    (相當于:data、computed、methods)

    <>認識和定義State

    state是store的核心部分,因為store是用來幫助我們管理狀態

    <>操作State

    *
    讀取和寫入state:

    默認情況下,可以通過store實例訪問狀態來直接讀取和寫入狀態;
    ``` const counterStore = useCounter() counterStore.counter++ counterStore.name
    = 'coderWhy' ```
    *
    重置State:
    可以調用store上的$reset()方法將狀態重置到其初始值
    const counterStore = useCounter() conterStore.$reset()
    *
    改變State

    *
    除了直接用store.counter++修改store,還可以調用$patch

    *
    它允許您使用部分‘state’對象同時應該多個修改
    const counterStore = useCounter() counterStore.$patch({ counter:100,
    name:'kobe' })
    *
    替換State
    可以通過將其$state屬性設置為新對象替換Store的整個狀態
    conterStore.$state = { counter:1, name:'why' }
    <>認識和定義Getters

    *
    Getters相當于Store的計算屬性:

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

    *
    訪問當前store的getters:
    const counterSotre = useCounter() console.log(counterStore.doublCounter)
    *
    我們可以使用this來訪問當前的store實例中getters
    expoer const useCounter = defineStore('counter',{ state: () => { counter:100,
    firstname:'kobe' }, getters:{ doubleCounter(state){ return state.counter *2 }
    doubleCounterAdd(){ //this指向store return this.doubleCounter +1 } } })
    *
    訪問其它store的getters
    import useUser from ./user const userStore = useUser() expoer const useCounter
    = defineStore('counter',{ state: () => { counter:100, firstname:'kobe' },
    getters:{ //調用其它Store doubleCounterUser(){ return this.doubleCounter +
    userStore.umu } } })
    *
    通過getters可以返回一個函數,可以傳參數
    expoer const useCounter = defineStore('counter',{ state: () => { counter:100,
    firstname:'kobe' }, getters:{ //調用其它Store doubleCounter(state){ return function
    (is) { return state.id + id } } } }) const StoreConter = useCounter(); //傳參
    StoreCounter.doublCounter(111)
    <>認識和定義Actions

    *
    Actions 相當于組件中的methods,可以使用defineStore()中的actions屬性定義
    expoer const useCounter = defineStore('counter',{ state: () => { counter:100,
    firstname:'kobe' }, getters:{ //調用其它Store doubleCounter(state){ return function
    (is) { return state.id + id } } }, actions:{ increment(){ this.counter++ },
    //傳參 incrementnum(num){ this。counter += num } } })
    和getters一樣,在action中可以通過this訪問整個store實例:
    function increment(){ //調用 counterStore.increment() } function incrementnum(){
    counterStore.increment(10) }
    <>Actions執行異步操作:

    *
    Actions中是支持異步操作的,并且我們可以編寫異步函數,在函數中使用await
    actions:{ async fetchHome(){ //???請求 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) })

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频