Pinia簡單使用及數據持久化怎么實現

這篇文章主要講解了“Pinia簡單使用及數據持久化怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Pinia簡單使用及數據持久化怎么實現”吧！

基本介紹

Pinia 是 Vue.js 的輕量級狀態管理庫

• pinia和vuex4一樣，也是vue官方的狀態管理工具(作者是 Vue 核心團隊成員）

• pinia相比vuex4，對于vue3的兼容性更好

• pinia相比vuex4，具備完善的類型推薦

• pinia同樣支持vue開發者工具,最新的開發者工具對vuex4支持不好

pinia核心概念

• state: 狀態

• actions: 修改狀態（包括同步和異步，pinia中沒有mutations）

• getters: 計算屬性

基本使用與state

目標：掌握pinia的使用步驟

（1）安裝

yarn add pinia
# or
npm i pinia

（2）在main.js中掛載pinia

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia'
const pinia = createPinia()

createApp(App).use(pinia).mount('#app')

（3）新建文件store/counter.js

import { defineStore } from 'pinia'
// 創建store,命名規則： useXxxxStore
// 參數1：store的唯一表示
// 參數2：對象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
   
  },
  actions: {
    
  },
})

export default useCounterStore

(4) 在組件中使用

<script setup>
import useCounterStore from './store/counter'

const counter = useCounterStore()
</script>

<template>
  <h2>根組件---{{ counter.count }}</h2>
</template>

<style></style>

actions的使用

目標：掌握pinia中actions的使用

在pinia中沒有mutations，只有actions，不管是同步還是異步的代碼，都可以在actions中完成。

（1）在actions中提供方法并且修改數據

import { defineStore } from 'pinia'
// 1. 創建store
// 參數1：store的唯一表示
// 參數2：對象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})

export default useCounterStore

（2）在組件中使用

<script setup>
import useCounterStore from './store/counter'

const counter = useCounterStore()
</script>

<template>
  <h2>根組件---{{ counter.count }}</h2>
  <button @click="counter.increment">加1</button>
  <button @click="counter.incrementAsync">異步加1</button>
</template>

getters的使用

pinia中的getters和vuex中的基本是一樣的，也帶有緩存的功能

（1）在getters中提供計算屬性

import { defineStore } from 'pinia'
// 1. 創建store
// 參數1：store的唯一表示
// 參數2：對象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})

export default useCounterStore

(2)在組件中使用

  <h2>根組件---{{ counter.count }}</h2>
  <h4>{{ counter.double }}</h4>

storeToRefs的使用

目標：掌握storeToRefs的使用

如果直接從pinia中解構數據，會丟失響應式， 使用storeToRefs可以保證解構出來的數據也是響應式的

<script setup>
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'

const counter = useCounterStore()
// 如果直接從pinia中解構數據，會丟失響應式
const { count, double } = counter

// 使用storeToRefs可以保證解構出來的數據也是響應式的
const { count, double } = storeToRefs(counter)
</script>

pinia模塊化

在復雜項目中，不可能把多個模塊的數據都定義到一個store中，一般來說會一個模塊對應一個store，最后通過一個根store進行整合

（1）新建store/user.js文件

import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: 'zs',
      age: 100,
    }
  },
})

export default useUserStore

(2)新建store/index.js

import useUserStore from './user'
import useCounterStore from './counter'

// 統一導出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

（3）在組件中使用

<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()

// 使用storeToRefs可以保證解構出來的數據也是響應式的
const { count, double } = storeToRefs(counter)
</script>

pinia數據持久化

目標： 通過 Pinia 插件快速實現持久化存儲。

插件文檔：點擊查看

用法

安裝

yarn add pinia-plugin-persistedstate
or
npm i  pinia-plugin-persistedstate

使用插件 在main.ts中注冊

import { createApp } from "vue";
import App from "./App.vue";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia);

模塊開啟持久化

const useHomeStore = defineStore("home",{
  // 開啟數據持久化
  persist: true
  // ...省略
});

常見疑問

• 模塊做了持久化后，以后數據會不會變，怎么辦？

• 先讀取本地的數據，如果新的請求獲取到新數據，會自動把新數據覆蓋掉舊的數據。

• 無需額外處理，插件會自己更新到最新數據。

進階用法

需求：不想所有數據都持久化處理，能不能按需持久化所需數據，怎么辦？

• 可以用配置式寫法，按需緩存某些模塊的數據。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', s{
  state: () => {
    return {
      someState: 'hello pinia',
      nested: {
        data: 'nested pinia',
      },
    }
  },
  // 所有數據持久化
  // persist: true,
  // 持久化存儲插件其他配置
  persist: {
    // 修改存儲中使用的鍵名稱，默認為當前 Store的 id
    key: 'storekey',
    // 修改為 sessionStorage，默認為 localStorage
    storage: window.sessionStorage,
    // 部分持久化狀態的點符號路徑數組，[]意味著沒有狀態被持久化(默認為undefined，持久化整個狀態)
    paths: ['nested.data'],
  },
})

總結：相比于vuex，pinia對于typescript的支持性更好，友好的devTools支持，pinia只有1kb，簡化了很多方法的寫法。

感謝各位的閱讀，以上就是“Pinia簡單使用及數據持久化怎么實現”的內容了，經過本文的學習后，相信大家對Pinia簡單使用及數據持久化怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！