快捷導(dǎo)航

vue3中vuex與pinia的踩坑筆記記錄

更新時(shí)間：2021年12月20日 10:42:35 作者：接口500

Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue3中vuex與pinia踩坑的相關(guān)資料,需要的朋友可以參考下

介紹

Pinia 是 Vue.js 的輕量級(jí)狀態(tài)管理庫(kù)，最近很受歡迎。它使用 Vue 3 中的新反應(yīng)系統(tǒng)來(lái)構(gòu)建一個(gè)直觀且完全類型化的狀態(tài)管理庫(kù)。

Pinia的成功可以歸功于其管理存儲(chǔ)數(shù)據(jù)的獨(dú)特功能(可擴(kuò)展性、存儲(chǔ)模塊組織、狀態(tài)變化分組、多存儲(chǔ)創(chuàng)建等)。

另一方面，Vuex也是為Vue框架建立的一個(gè)流行的狀態(tài)管理庫(kù)，它也是Vue核心團(tuán)隊(duì)推薦的狀態(tài)管理庫(kù)。Vuex高度關(guān)注應(yīng)用程序的可擴(kuò)展性、開發(fā)人員的工效和信心。它基于與Redux相同的流量架構(gòu)。

安裝使用

安裝 vuex

npm install vuex@next --save

cnpm install vuex@next --save-

yarn add vuex@next --save

安裝 pinia

npm install pinia@next

cnpm install pinia@next

yarn add pinia@next

裝完直接根據(jù)下面的寫法來(lái)用就行了，只要你會(huì)用 vuex，你就等于你會(huì)用 pinia 的基本用法了，這邊不展示 pinia 的插件寫法

簡(jiǎn)單對(duì)比寫法差異與共同點(diǎn)

vuex 和 pinia 是同團(tuán)隊(duì)成員編寫，但是 pinia 寫法上更加人性化，也更簡(jiǎn)單

vuex在vue3中的寫法和用法

// store.js
import { createStore } from 'vuex'

export default createStore({
    // 定義數(shù)據(jù)
    state: { a:1 },
    // 定義方法
    mutations: {
        xxx(state,number){
            state.a = number
        }
    },
    // 異步方法
    actions: { },
    // 獲取數(shù)據(jù)
    getters: { getA:state=>return state.a }
})

// 在vue3中使用
<template>
    <div>
        {{number}}
        <button @click="clickHandle">按鈕</button>
    </div>
</template>
<script>
import {useStore} from "vuex"
export default {
    setup(){
        let store = useStore()
        // ??? 如果直接取state的值必須使用computed才能實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式 如果直接取 store.state.a 則不會(huì)監(jiān)聽(tīng)到數(shù)據(jù)的變化，或者使用getter，就可以不使用computed
        let number = computed(()=>store.state.a)
        const clickHandle = () => {
            store.commit("xxx","100")
        }
        return{number,clickHandle}
    }
}
<script>

pinia在vue3中的寫法和用法

// store.js
import { defineStore } from 'pinia'

// defineStore 調(diào)用后返回一個(gè)函數(shù)，調(diào)用該函數(shù)獲得 Store 實(shí)體
export const GlobalStore = defineStore({
  // id: 必須的，在所有 Store 中唯一
  id: "myGlobalState",
  // state: 返回對(duì)象的函數(shù)
  state: () => ({
    a: 1,
  }),
  getters: {},
  actions: {
    setXXX(number) {
      this.a = number;
    },
  },
});

// 在vue3中使用
<template>
    <div>
        {{number}}
        <button @click="clickHandle">按鈕</button>
    </div>
</template>
<script>
import {GlobalStore} from "@/store/store.js"
export default {
    setup(){
        let store = GlobalStore();
        // ??? 如果直接取state的值必須使用computed才能實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式 如果直接取 store.state.a 則不會(huì)監(jiān)聽(tīng)到數(shù)據(jù)的變化，或者使用getter，就可以不使用computed (這邊和vuex是一樣的)
        let number = computed(()=>store.a)
        const clickHandle = () => {
            store.setXXX("100")
        }
        return{number,clickHandle}
    }
}
<script>

由此兩個(gè)代碼的對(duì)比我們可以看出使用 pinia 更加的簡(jiǎn)潔，輕便。pinia 取消了原有的 mutations，合并成了 actions，且我們?cè)谌≈档臅r(shí)候可以直接點(diǎn)到那個(gè)值，而不需要在.state，方法也是如此。

Vuex 和 Pinia 的優(yōu)缺點(diǎn)

Vuex的優(yōu)點(diǎn)

支持調(diào)試功能，如時(shí)間旅行和編輯
適用于大型、高復(fù)雜度的Vue.js項(xiàng)目

Vuex的缺點(diǎn)

從 Vue 3 開始，getter 的結(jié)果不會(huì)像計(jì)算屬性那樣緩存
Vuex 4有一些與類型安全相關(guān)的問(wèn)題

Pinia的優(yōu)點(diǎn)

完整的 TypeScript 支持：與在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
極其輕巧(體積約 1KB)
store 的 action 被調(diào)度為常規(guī)的函數(shù)調(diào)用，而不是使用 dispatch 方法或 MapAction 輔助函數(shù)，這在 Vuex 中很常見(jiàn)
支持多個(gè)Store
支持 Vue devtools、SSR 和 webpack 代碼拆分

Pinia的缺點(diǎn)