首頁 > web前端 > Vue.js > 主體

分享Vue3全新狀態管理工具:Pinia

青灯夜游
發布: 2021-12-16 10:43:07
轉載
3702 人瀏覽過

這篇文章跟大家分享介紹一下全新的 Vue3 狀態管理工具:Pinia,聊聊Pinia工具的安裝和使用方法,希望對大家有幫助。

分享Vue3全新狀態管理工具:Pinia

全新的Vue3 狀態管理工具:Pinia

Vue3 發布已經有一段時間了,它採用了新的響應式系統,而且建構了一套全新的Composition API。 Vue 的周邊生態都在加緊適配這套新的系統,官方的狀態管理庫 Vuex 也在適配中,為此官方提出了一個 Vuex 5 的全新提案。 【相關推薦:《vue.js教學》】

分享Vue3全新狀態管理工具:Pinia

  • #支援兩種文法建立Store:Options ApiComposition Api;
  • 刪除mutations,只支援stategettersactions# ;
  • 模組化的設計,能很好地支援程式碼分割;
  • 沒有巢狀的模組,只有Store 的概念;
  • 完整的TypeScript 支持;

在這個提案下方,有個評論很有意思。簡單翻譯一下:

分享Vue3全新狀態管理工具:Pinia

好巧不巧,Vuex5 的提案,與Pinia 實現的功能不能說毫無關係,只能說一模一樣,今天的文章就來給大家介紹一下這個鳳梨。

安裝

在現有專案中,使用下列指令進行 Pinia 模組的安裝。

# yarn
yarn add pinia@next
# npm
npm i pinia@next
登入後複製

安裝完成後,需要在 Vue3 專案的入口檔案中,進行匯入安裝。

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

// 实例化 Vue
const app = createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount('#app')
登入後複製

上手

要使用 Pinia 的話,只需要定義一個 store,然後在用到該資料的地方進行匯入。

定義Store

import { defineStore } from "pinia"

// 对外部暴露一个 use 方法,该方法会导出我们定义的 state
const useCounterStore = defineStore({
  // 每个 store 的 id 必须唯一
  id: 'counter',
  // state 表示数据源
  state: () => ({
    count: 0
  }),
  // getters 类似于 computed,可对 state 的值进行二次计算
  getters: {
    double () {
        // getter 中的 this 指向 state
        return this.count * 2
      },
      // 如果使用箭头函数会导致 this 指向有问题
      // 可以在函数的第一个参数中拿到 state
    double: (state) => {
        return state.count * 2
      }
  },
  // actions 用来修改 state
  actions: {
    increment() {
      // action 中的 this 指向 state
      this.count++
    },
  }
})

export default useCounterStore
登入後複製

除了使用上述類似vuex 的方式來建立state,還可以使用function 的形式來建立store,有點類似於Vue3 中的setup()

import { ref, computed } from "vue"
import { defineStore } from "pinia"

// 对外部暴露一个 use 方法,该方法会导出我们定义的 state
const useCounterStore = defineStore('counter', function () {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return {
      count, double, increment
  }
})

export default useCounterStore
登入後複製

使用Store

前面也介紹過,Pinia 提供了兩種方式來使用store,Options ApiComposition Api 中都完美支援。

Options Api

Options Api 中,可直接使用官方提供的mapActionsmapState 方法,匯出store 的state、getter、action,其用法與Vuex 基本一致,很容易上手。

import { mapActions, mapState } from 'pinia'
import { useCounterStore } from '../model/counter'

export default {
  name: 'HelloWorld',
  computed: {
    ...mapState(useCounterStore, ['count', 'double'])
  },
  methods: {
    ...mapActions(useCounterStore, ['increment'])
  }
}
登入後複製

Composition Api

Composition Api 中,不管是state 或getter 都需要透過computed 方法來監聽變化,這和Options Api 中,需要放到computed 物件中的道理一樣。另外, Options Api  中拿到的 state 值是可以直接進行修改操作的,當然還是建議寫一個 action 來操作 state 值,方便後製。

// Composition Api
import { computed } from 'vue'
import { useCounterStore } from '../stores/counter'
export default {
  name: 'HelloWorld',
  setup() {
    const counter = useCounterStore()
    return {
      // state 和 getter 都需要在使用 computed,这和 Options Api 一样
      count: computed(() => counter.count),
      double: computed(() => counter.double),
      increment: () => { counter.count++ }, // 可以直接修改 state 的值
      increment: counter.increment, // 可以引用 store 中定义的 action
    }
  }
}
登入後複製

類型提示

在 Vuex 中,TypeScript 的類型提示做得不是很好,在進行類型推導時,只能找到它的 state。特別是在寫程式碼的過程中,程式碼提示就很不聰明。

分享Vue3全新狀態管理工具:Pinia

而 pinia,就能推導出所有定義的 state、getter、action,這樣在寫程式碼的時候,就會方便很多。

分享Vue3全新狀態管理工具:Pinia

分享Vue3全新狀態管理工具:Pinia

主要是pinia 透過TypeScript 進行了十分友善的類型定義,感興趣的可以看看pinia 的類型定義檔(pinia.d.ts):

分享Vue3全新狀態管理工具:Pinia

程式碼分割

由於使用了模組化設計,所有的store 都能夠單獨引入,而不是像vuex 一樣,透過modules 的方式,將所有的module 掛載到一個store 上。

假設,我們目前透過 Vuex 建立了一個 Store,這個 Store 下有兩個 module,分別是使用者模組(User)和商品模組(Goods)。即使目前首頁只使用到了使用者訊息,但是整個 Store 都會被打包到首頁的 js chunk 中。

分享Vue3全新狀態管理工具:Pinia

分享Vue3全新狀態管理工具:Pinia

如果我們使用 pinia,我們會使用 defineStore 定義兩個 完全是分離狀態的 store,兩個頁面在引入時,也互不影響。最後打包的時候,首頁的 js chunk 和商品頁的 js chunk 會分別打包對應的 store。

分享Vue3全新狀態管理工具:Pinia

Pinia 的介紹到這裡就告一段落了,如果現在有新專案要使用 Vue3 進行開發,推薦無腦使用 Pinia,更加簡潔,而且大小僅 1KB。

更多程式相關知識,請造訪:程式設計入門! !

以上是分享Vue3全新狀態管理工具:Pinia的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板