10-pinia

使用前需要先安裝

npm install pinia

// state、getter 和 action，我們可以假設這些概念相當於元件中的 data、 computed 和 methods
// data可以透過this去呼叫
// computed就是計算屬性，也能從中直接呼叫data的內容

使用步驟

1. 在src下面新建資料夾，比如store，然後在資料夾下面新建一個js檔案，比如counter.js
2. 在counter.js中寫入程式碼
3. 在main.js中使用外掛
4. 在元件中運算元據

常規寫法

import { defineStore } from "pinia"

// 注意：這裡的名稱 counter 建議和你的js檔名稱保持一致
export const useCounterStore =  defineStore("counter",  {
    // 定義變數
    state: () => {
        return {count: 0, name: "小滿"}
    },

    // 這裡寫方法，與後端互動的邏輯可以寫在這裡。
    actions: {
        increment(num){
            console.log(num);
            // 與後端互動，才真正的把數量增加
            this.count++
        },
        changeName(){
            this.name = '大喬'
        }
    },
    // 獲取資料
    getters: {
        // 這個函式是自己定義的，就相當於計算屬性
        // 計算屬性必須返回
        // 檢視呼叫的時候，不需要寫括號 {{counter.getCounter}}
        getCount(){
            return this.count * 2
        }
    }
})

// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"

// 忽略掉無關的
import { createPinia } from 'pinia'
const pinia = createPinia() 
createApp(App).use(router).use(pinia).mount('#app')

<template>
  {{counter.count}}  -- {{counter.name}}  -- {{counter.getCount}} 
  <hr>
  <ul v-for="(item, index) in carArr" :key=item.id>
    <li>編號{{index + 1}} : 名稱：{{item.name}}  價格: {{item.price}}  <button @click="joinCar(item.id)">加入購物車</button></li>
  </ul>
  <button @click="counter.changeName()">修改名稱</button>
</template>

<script setup>
    import { reactive } from "vue";
    import {useCounterStore} from "../store/counter.js"
    
    // 以後透過counter物件 操作其中state getter action的東西
    const counter = useCounterStore()

    const carArr = reactive([
        {id:1, name: "抱枕", price: 33},
        {id:2, name: "香水", price: 79},
        {id:3, name: "茶葉", price: 199}
    ])

    function joinCar(num){
        counter.increment(num)
    }

</script>

更優雅的寫法

只重寫store/counter.js

import { defineStore } from "pinia"
import { ref } from "vue";


export const useCounterStore =  defineStore("counter",  () => {
    let count = ref(0)
    let name = ref("小滿")

    function increment(){
        count.value++
    }
    function changeName(){
        name.value = '大喬'
    }
    function getCount(){
        return count.value * 2
    }

    return {count, name, increment, changeName, getCount}
})

https://juejin.cn/post/7057439040911441957?searchId=20240508183338AAF7DE2E0714BA25F418