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

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

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

介紹

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

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

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

安裝使用

安裝 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ù)下面的寫法來用就行了，只要你會用 vuex，你就等于你會用 pinia 的基本用法了，這邊不展示 pinia 的插件寫法

簡單對比寫法差異與共同點

vuex 和 pinia 是同團隊成員編寫，但是 pinia 寫法上更加人性化，也更簡單

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才能實現(xiàn)數(shù)據(jù)的響應式 如果直接取 store.state.a 則不會監(jiān)聽到數(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)用后返回一個函數(shù)，調(diào)用該函數(shù)獲得 Store 實體
export const GlobalStore = defineStore({
  // id: 必須的，在所有 Store 中唯一
  id: "myGlobalState",
  // state: 返回對象的函數(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才能實現(xiàn)數(shù)據(jù)的響應式 如果直接取 store.state.a 則不會監(jiān)聽到數(shù)據(jù)的變化，或者使用getter，就可以不使用computed (這邊和vuex是一樣的)
        let number = computed(()=>store.a)
        const clickHandle = () => {
            store.setXXX("100")
        }
        return{number,clickHandle}
    }
}
<script>

由此兩個代碼的對比我們可以看出使用 pinia 更加的簡潔，輕便。pinia 取消了原有的 mutations，合并成了 actions，且我們在取值的時候可以直接點到那個值，而不需要在.state，方法也是如此。

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

Vuex的優(yōu)點

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

Vuex的缺點

從 Vue 3 開始，getter 的結果不會像計算屬性那樣緩存
Vuex 4有一些與類型安全相關的問題

Pinia的優(yōu)點

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

Pinia的缺點