認識Vue新一代的狀態管理庫--Pinia

什麼是pinia？怎麼使用？這篇文章就來帶大家了解一下Vue新一代的狀態管理庫--Pinia，希望對大家有幫助！

什麼是Pinia

#Pinia (西班牙文的鳳梨)，本質上依然是一個狀態管理的庫，用於跨元件、頁面進行狀態共用。 【相關推薦：vue.js影片教學】

pinia 與vuex 的區別：

• 更友善的TypeScript支持，Vuex之前對TS的支援很不友善

• 與Vuex 相比，Pinia 提供了一個更簡單的API，具有更少的儀式，提供了Composition-API 風格的API

• 不再有modules的巢狀結構

• #也不再有命名空間的概念，不需要記住它們的複雜關係

如何使用Pinia

1、安裝pinia

yarn add pinia

2、建立一個pinia

// src/stores/index.js
import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

//main.js
import pinia from './stores'

app.use(pinia)

認識Store

一個Store （如Pinia）是一個實體，它會持有為綁定到你元件樹的狀態和業務邏輯，也就是保存了全域的狀態

這樣可以定義任意數量的Store來管理你的狀態，包括state、getters、actions

# #1. 定義一個store

• Store 是使用defineStore() 定義的，

##且它需要一個唯一名稱，作為第一個參數傳遞

2. 使用store

操作State

state 是store 的核心部分，store是用來實作我們管理狀態的。

方式一：直接一個個修改state
方式二：一次修改多個狀態
方式三：取代state
方式四：重設state

Getters

1 . 認識並定義Getters
• Getters

相當於Store的計算屬性：

可以用defineStore() 中的getters 屬性定義;

getters中可以定義接受一個state為參數的函數;

• 2. 存取Getters

• 方式一：訪問目前store 的Getters

• 方式二：Getters 中訪問自己的其他Getters

方式三：訪問其他store 的Getters

getters: {
    // 1. 基本使用
    debouleCount(state) {
      return state.count * 2
    },
    // 2. 一个 getters 引入另外一个 getters
    useDebouleCount() {
      return this.debouleCount + 2
    },
    // 3. getter也支持返回一个函数
    getFriendById(state) {
      return function (id) {
        for (let i = 0; i <blockquote><p></p></blockquote><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/4cc76dfa4ba802a30963e696c1128d1f-9.png?x-oss-process=image/resize,p_40" class="lazy" alt="認識Vue新一代的狀態管理庫--Pinia"></p><blockquote><p></p></blockquote><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/4cc76dfa4ba802a30963e696c1128d1f-10.png?x-oss-process=image/resize,p_40" class="lazy" alt="認識Vue新一代的狀態管理庫--Pinia"></p><p><a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门"></a>##Action 可以理解成元件中的methods ，和getters一樣，在action中可以透過this存取整個store實例的所有操作。 </p>##################Action 是支援非同步操作的，所以可以使用 await。 ##################更多程式相關知識，請造訪：###程式設計入門###！ ！ ###

以上是認識Vue新一代的狀態管理庫--Pinia的詳細內容。更多資訊請關注PHP中文網其他相關文章！