快速入門 Pinia 狀態(tài)管理庫(kù)

Pinia 是一個(gè)用于 Vue 的狀態(tài)治理庫(kù)，相似 Vuex, 是 Vue 的另一種狀態(tài)治理計(jì)劃。如果你現(xiàn)在使用 vue3 開(kāi)發(fā)項(xiàng)目，那么推薦你使用 Pinia 開(kāi)發(fā)。

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

1、完整的 TypeScript 支持：與在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易。

2、極其輕巧（體積約 1KB）

3、store 的 action 被調(diào)度為常規(guī)的函數(shù)調(diào)用，而不是使用 dispatch 方法或 MapAction 輔助函數(shù)，這在 Vuex 中很常見(jiàn)。

4、支持多個(gè)Store，Pinia 不支持嵌套存儲(chǔ)。相反，它允許你根據(jù)需要?jiǎng)?chuàng)建 store。但是，store 仍然可以通過(guò)在另一個(gè) store 中導(dǎo)入和使用 store 來(lái)隱式嵌套。

5、支持 Vue devtools、SSR 和 webpack 代碼拆分

快速開(kāi)始

npm install pinia

創(chuàng)建一個(gè) pinia 作為 root store 添加到 app 中。

import { createApp } from 'vue'import { createPinia } from 'pinia'
const app = createApp({})app.use(createPinia())

開(kāi)始定義 store

export const useStore = defineStore('main', {  state: () => ({    counter: 0,  }),  getters: {    doubleCount: (state) => state.counter * 2,  },  actions: {    increment() {      this.counter++    },    randomizeCounter() {      this.counter = Math.round(100 * Math.random())    },  },})

在組件中使用 store 。

<template>  <div>    {{store.count}}  div>template>
<script>import { useStore } from '@/stores/counter'
export default {  setup() {    const store = useStore()
    return {      // 可以返回 store 實(shí)例在模板中使用      store,    }  },}script>

同樣也支持之前的輔助函數(shù)。可以使用 mapState 來(lái)映射我們 store 中的 state 和 getter。也可以使用 mapActions 來(lái)映射 action 函數(shù)。

import { mapState } from 'pinia'
export default {  computed: {    ..mapState(useStore, ['counter', 'doubleCount'])  },  methods: {    ...mapActions(useStore, ['increment'])    ...mapActions(useStore, { myOwnName: 'randomizeCounter' }),  },}

Pinia 相比 Vuex 更加簡(jiǎn)略，而且 Pinia 能夠自在擴(kuò)大。

Pinia 是合乎直覺(jué)的狀態(tài)治理形式，讓使用者回到了模塊導(dǎo)入導(dǎo)出的原始狀態(tài)，使?fàn)顟B(tài)的起源更加清晰可見(jiàn)。

Pinia 的應(yīng)用感觸相似于 Recoil，但沒(méi)有那么多的概念和 API，主體十分精簡(jiǎn)，極易上手（Recoil 是 Facebook 官網(wǎng)出品的用于 React 狀態(tài)治理庫(kù)，應(yīng)用 React Hooks 治理狀態(tài)）。

而且 Pinia 適用于 Vue 2 和 Vue 3，并且不要求您使用 composition API。