Vue 基礎 V. ( Pinia ) #

這裡提到了 Pinia 的使用，過去使用的是 Vuex，自從 Vue3 後開始推行 Pinia。

基本安裝 #

npm add pinia

Pinia #

安裝與使用的基本上只有幾個原則:

1. 必須使用 defineStore() 來定義它。

2. 建立單獨的sotre資料夾及檔案，

   • state 與 data 是一樣資料存放區。
   • getters 與 Computed 類似，處理 state 資料後可以提取使用。
   • actions 與 method 類似，使用 this 處理資料後放到 state 內，可以將 axios後將資料放入。
   cmdstategettersactions

   cmd

   ...
   src /stores /store.js
   ...
   

   js

   import {defineStore} from 'pinia'
   export const myuseStore=defineStore('mystore',{
    state:()=>({
      myData:[],
      refData:"",
      count: 0
    })
    ...
   })
   

   js

   import {defineStore} from 'pinia'
   export const myuseStore=defineStore('mystore',{
    ...
    getters:{
      myComputed:(state)=>{
        state.count*2
        }
    }
    ...
    })
   

   js

   import {defineStore} from 'pinia'
   export const myuseStore=defineStore('mystore',{
    ...
    actions:{
      myMethod(){
        this.count++
        },
     async axiosData (){
        try{
         const getdata=awit axios.get('url / path')
         this.myData=getdata.data
        }
        catch(error){
          console.log(error)
        }
      },
      getMsg(msg,msg1){
        console.log(msg,msg1)
      }
    }
    ...
   })
   

3. 掛進 main.js 內。

   js

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

4. 在 .vue 內使用。

   • actions是需要被驅動，才會有作用，就像 vue 裡面的 method，需要 ( @cilck ) 才會執行；下方舉例用在 axios 時，該如何驅動。

 import {ref, reactive} from 'vue'
 import {myuseStore} from '../stores/store.js'
 import {storeToRefs } from 'pinia'
 const useStore = myuseStore()

 const {refData} = storeToRefs(useStore)
 ...
 const usRef = ref(refData)
 const list = reactive ( myuseStore.myData )

 import {reactive} from 'vue'
 import {myuseStore} from '../stores/store.js'
 import {storeToRefs } from 'pinia'
 const useStore = myuseStore()
 ...

<template>
 <ul>
   <li v-for="item in getData" :key="item.id">
     <a :href="item.link"> {{item.name}} </a>
   </li>
 </ul>
 ...
 <div @click = "useStore.getMsg ( msg1, msg2 )" ></div>
</template>

<script setup>
 import {onMounted, computed} from 'vue'
 import {myuseStore} from '../stores/store.js'
 const useStore = myuseStore()
 ...
 const getData = computed (()=>{
   return useStore.myData
 })
 onMounted(()=>{
   useStore.axiosData()
 })
</script>

參考 #

• Pinia 官網
• 第六天 10分鐘略懂 pinia (vue的共用儲存區)
• Vue 3 + Pinia - User Registration and Login Example & Tutorial