pinina使用

huihuihero發表於2024-09-04

定義pinia儲存容器 /stores/piniause-demo.js

/**
 * 定義並匯出容器
 * 引數1：容器ID，必須唯一
 * 引數2：配置物件
 */
export const useDemoStore = defineStore('demo', {
  //state：類似元件data，用於儲存資料供全域性呼叫
  state: () => ({
    count: 100,
    name: 'Job',
    likes: ['a', 'b', 'c'],
  }),
  //getters:類似元件computed，用於封裝計算屬性，有快取功能
  getters: {
    // newCount(state) {
    //   return state.count + 10; //可以使用state(ts裡最好使用state以用於型別推斷)
    // },
    newCount() {
      return this.count + 10; //也可以使用this
    },
  },
  //actions：類似元件methods，用於封裝業務邏輯，修改state裡的資料
  actions: {
    changeDatas(value1, value2, value3) {
      this.count = value1;
      this.name = value2;
      this.likes.push(value3);
    },
  },
});

使用pinia儲存資料 /pages/piniause-demo.vue

<template>
  <div>{{ demoStore.count }}</div>
</template>

<script setup>
import { useDemoStore } from '~/stores/piniause-demo.js' //引入例項
import { storeToRefs } from 'pinia' //引入API

/* -----初始化例項----- */
const demoStore = useDemoStore()

/* -----獲取資料----- */
console.log(demoStore.count) //直接獲取

const { count, name } = storeToRefs(demoStore) //解構獲取（響應式），注：直接const {count,name} = demoStore會丟失響應
console.log(count, name)

/* -----修改資料----- */
//方式1：單個直接修改（不推薦）
demoStore.count = 200

//方式2：簡單的：$patch方法-直接批次修改（注：此方式經測試，賦空值時不生效，建議用方式3）
demoStore.$patch({
  count: 200,
  name: 'Jack',
  likes: [...demoStore.likes, 'd'],
})

//方式3：複雜一點的：$patch方法-函式批次修改
demoStore.$patch((state) => {
  state.count = 200
  state.name = 'Jack'
  state.likes.push('d')
})

//方式4：再複雜一點的：封裝到actions裡做處理
demoStore.changeDatas(200, 'Jack', 'd') //可以定義動態引數

/* -----getters計算屬性----- */
console.log(demoStore.newCount)
</script>

<style lang="less" scoped></style>

相關文章