pinia的使用

順·發表於2023-04-27

1. pinia和vuex的區別

  • pinia沒有mutations，只有：state、 getters、 actions
  • pinia分模組不需要modules（之前vuex分模組需要modules)
  • pinia體積更小（效能更好）
  • pinia可以直接修改state資料

2.安裝pinia

npm i pinia

根據需要 安裝pinia-plugin-persist外掛，實現持久化儲存

npm i pinia-plugin-persist

3.main.ts中匯入

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

import { createPinia } from 'pinia' // 從pinia中匯入createPinia方法
import piniaPersist from 'pinia-plugin-persist'  //匯入持久化儲存

const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPersist)    //使用持久化儲存,不需要可不寫

app.use(pinia) // 使用vue例項的use方法，告訴vue我們要使用pinia
app.mount('#app')

4.建立store

新建store資料夾，新建userInfo.ts模組檔案來存放使用者資訊相關的資料，因為pinia中沒有modules區分模組，store下的每個檔案就是一個模組

建立store很簡單，呼叫pinia中的defineStore函式即可，該函式接收兩個引數：

name：一個字串，必傳項，該store的唯一id。
options：一個物件，store的配置項，比如配置store內的資料，修改資料的方法等等。
我們可以定義任意數量的store，因為我們其實一個store就是一個函式，這也是pinia的好處之一，讓我們的程式碼扁平化了，這和Vue3的實現思想是一樣的。

import { defineStore } from 'pinia' //從pinia中匯入，defineStore方法，用於定義一個新的store

// 第一個引數是應用程式中 store 的唯一 id,最好和檔名同意
export const userInfoStore = defineStore('userInfo', { // 使用defineStore方法定義store
  state:() => {                       // state表示這個store裡的狀態，也就是存放資料的地方
    return {
      userName: 'pinia定義的資料',       // 這裡我們定義了一個資料叫userName，用於存放我們的使用者名稱 
    }
  },
  getters: {
    double: (state) => '姓名:' + state.userName,
  },
  actions: {
    // 修稿state的值
    changeStateVal(val: any) {
      this.userName = val
    }
  },

  // 持久化儲存配置
  persist: {
    enabled: true , // pinia-plugin-persist 是否開啟持久化儲存， 預設sessionStorage
    strategies: [{
      // key: 'userInfo',      //儲存的key，預設當前store的key 
      // paths: ['userName'],   //哪個屬性需要持久化儲存，預設全是
      storage: localStorage    //使用localStorage儲存
    }]
  }
})

5.使用store

引入使用即可，pinia中有多種方式可以修改state中的資料

<template>
  <div>
    {{ store.userName }}
    <button @click="handleUpdatePinia">修改pinia資料</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { storeToRefs } from "pinia";     //和vue中toRefs的作用一模一樣
import { userInfoStore } from "../store/userInfo";  //直接引入store中定義的 userInfoStore
const store = userInfoStore();           // 然後例項化


const handleUpdatePinia = () => {
  // 第一種方式：直接修改
  // store.userName = 'dfads'    //直接修改pinia的資料

  // 第二種方式 透過$patch
  // 1.
  // store.$patch({
  //   userName: "被修改的值",
  // });

  // 2.
  // store.$patch((state) => {
  //   state.userName = "被修改的值";
  // });

  //第三種方式 透過actions裡的方法修改
  store.changeStateVal("被修改的值"); //可以直接給actions裡面的方法傳遞引數
};


</script>

相關文章