Pinia怎么實現簡單的用戶狀態管理

這篇“Pinia怎么實現簡單的用戶狀態管理”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Pinia怎么實現簡單的用戶狀態管理”文章吧。

Store是什么？

全局狀態，用于在所有組件中，同步數據。

Store的應用場景?

在整個應用程序中訪問的數據（且不需要被持久化），例如導航欄中顯示的用戶信息，以及需要通過頁面保留的數據，例如一個非常復雜的多步驟表格。

pinia是什么？

簡單一句介紹，vuex的升級版，拋棄了煩人的Mutation。

其他優點

• action支持同步和異步；

• 良好的TypeScript支持；

• 支持用插件擴展功能；

• 扁平架構，沒有嵌套；

• 服務端渲染支持。

應用示例

下面我們以一個管理平臺的員工賬號信息為例，展示Pinia的使用方式。

本文作者認為setup是更好的組織代碼的方式，所以都用setup編寫下面的示例。

安裝和掛載部分，直接看文檔。

定義Store

import { defineStore } from 'pinia'

// 第一個參數是應用程序中 store 的唯一 id
export const useUserStore = defineStore('user', {
  // other options...
})

使用Store

import { useUserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = useUserStore()

    return {
      // 您可以返回整個 store 實例以在模板中使用它
      userStore,
    }
  },
}

（如果習慣用選項式API，還是可以配合map helpers，聲明各種map來訪問store。）

獲取store的響應式數據

直接解構會破壞響應式，需要用storeToRefs()提取屬性并保持響應式。

import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const userStore = useUserStore()
    // ? 這不起作用，因為它會破壞響應式
    // 這和從 props 解構是一樣的
    const { userName } = userStore
    
    // 這樣可以保持響應式
    const { userId } = storeToRefs(userStore)

    userName // "lucio"
    userId // "001"

    return {
      // 一直會是 "lucio"
      userName,
      // 這將是響應式的
      userId,
      // 這將是響應式的
      realUserName: computed(() => userStore.userName),
      }
  },
})

State

返回初始狀態的函數。

我們補全一下上面的定義Store部分的代碼。

初始化

import { defineStore } from 'pinia'

// 第一個參數是應用程序中 store 的唯一 id
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      // 所有這些屬性都將自動推斷其類型
      userName: 'lucio',
      userId: '001',
    }
  },
})

讀取和寫入state

• 通過store示例，可讀寫。

const userStore = useUserStore()
userStore.userId = '002'
userStore.$reset()
return { userStore }

• 通過$patch修改多個數據，參數可以是對象或者函數。

// 一次修改多個數據
userStore.$patch({
  userId: '002',
  userName: 'lucy',
})
// 適合對數組進行修改
userStore.$patch((state) => {
  state.roles.push({ name: 'admin', priority: 1 })
})

• 替換整個state

userStore.$state = { userId: '002', userName: 'lucy'}
// 或者通過pinia實例替換整個應用程序的狀態
pinia.state.value = {}

訂閱state變化

可以通過 store 的 $subscribe() 方法查看狀態及其變化，其只在patch之后觸發一次。

默認情況下，組件卸載后，訂閱會被刪除。如果想保留，設置配置項detached為true。

userStore.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  mutation.type // 'direct' | 'patch object' | 'patch function'
  // 與 userStore.$id 相同
  mutation.storeId // 'user'
  // 僅適用于 mutation.type === 'patch object'
  mutation.payload // 補丁對象傳遞給 to userStore.$patch()

  // 每當它發生變化時，將整個狀態持久化到本地存儲
  localStorage.setItem('user', JSON.stringify(state))
	},
	{ detached: true }, // detached為true，卸載組件后保留訂閱
)

Getters

返回狀態的計算值。

定義getter

import { defineStore } from 'pinia'

// 第一個參數是應用程序中 store 的唯一 id
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      // 所有這些屬性都將自動推斷其類型
      userName: 'lucio',
      userId: '001',
    }
  },
  getters: {
    // 自動推斷返回類型為字符串
    userText: (state) => `User: ${state.userName}`,
    // 也可以使用其他getter, 用this訪問store實例，必須要定義返回類型
    userTextPlus: (): string => `The name of ${this.userText}`,
  }
})

訪問getter

直接用store的實例訪問。

userStore.userText

（getters也可以傳遞參數，不是很常用的場景，這里就不示例了。）

（在A store中，也可以使用B store的getter）

Actions

相當于組件中的methods，適合用于定義組件的業務邏輯。

定義action

下面我們繼續補全上面的示例，在userStore中通過網絡請求獲取用戶數據。

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => {
    return {
      userName: 'lucio',
      userId: '001',
      userData: null,
    }
  },
  getters: {
    // ...
  },
  actions: {
  	async loginAndGetUserInfo(password) {
  		try {
  			this.userData = await api.login({password});
  			showToast('Login success');
  		} catch(error) {
  			showToast(error);
  			return error;
  		}
  	}
  }
})

訂閱action

可以使用 store.$onAction() 訂閱 action 及其結果。

下面對userStore添加一個訂閱，記錄上面的登陸操作，所用的時間

const unsubscribe = userStore.$onAction(
  ({
    name, // action 的名字
    store, // store 實例
    args, // 調用這個 action 的參數
    after, // 在這個 action 執行完畢之后，執行這個函數
    onError, // 在這個 action 拋出異常的時候，執行這個函數
  }) => {
    // 記錄開始的時間變量
    const startTime = Date.now()
    // 這將在 `store` 上的操作執行之前觸發
    console.log(`Start "${name}" with params [${args.join(', ')}].`)

    // 如果 action 成功并且完全運行后，after 將觸發。
    // 它將等待任何返回的 promise
    after((result) => {
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      )
    })

    // 如果 action 拋出或返回 Promise.reject ，onError 將觸發
    onError((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      )
    })
  }
)

// 手動移除訂閱
unsubscribe()

和訂閱state一樣，組件卸載時，訂閱將被刪除，可以添加設置第二個參數detach為true，在卸載組件后仍然保留訂閱。

export default {
  setup() {
    const someStore = useSomeStore()

    // 此訂閱將在組件卸載后保留
    someStore.$onAction(callback, true)

    // ...
  },
}

以上就是關于“Pinia怎么實現簡單的用戶狀態管理”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。