1.單純調接口(安裝pinia及引入如下第一張圖)
1.npm install pinia2.在main.js里引入即可import { createPinia } from 'pinia'app.use(createPinia())1.stores建立你文件的ts、內容如下：1-1 import { defineStore } from 'pinia'1-2 import { findPageJobSet } from '@/api/task-queue.js'（引入接口路徑）2.建立一個當前actions const actions ={findPageJobSet(data) {return new Promise((resolve,reject)=>{findPageJobSet(data).then(response =>{// 根據自己接口返回來定if(response.ok){resolve(response)}else{message.error(response.messsage)}})}).catch(()=>{reject()})}}3.最后拋出去export const useTaskQueue=defineStore('useTaskQueue',{actions})4.在頁面使用的時候4-1 import { mapActions } from 'pinia'4-2 import { useTaskQueue } from "@/stores/taskQueue"(這個是你剛才在store下建的文件)4-3 methods...mapActions(useTaskQueue, ['findPageJobSet']),4-4 使用 this.findPageJobSet(data)正常傳值就行
2.Pinia中Store的互相調用(在上面代碼中我們一直只使用了一個Store倉庫,其實在真實項目中我們往往是有多個Store的。有多個Store時,就會涉及Store內部的互相調用問題)
2-1 新建一個Store倉庫 index.ts
import { defineStore } from "pinia";
import { hyyStore } from './demo'
export const mainStore = defineStore('main', {state: () => {return {count: 0,helloPinia: 'Hello Pinia',phone: '17808098401'}},getters: {phoneHidden(): string {return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')}},actions: {changeState() {this.count++this.helloPinia = 'change helloPinia!!!'},getList() {console.log(hyyStore().list)}}
})2-2 index.ts中調用demo.ts倉庫
import { defineStore } from 'pinia'export const hyyStore = defineStore("hyyStore", {state: () => {return {list: ["黃黃", "小黃", "黃小黃"]}},getters: {},actions: {}
})2-3 具體頁面使用
import { mainStore } from '@/stores/demo'setup() {const getList = () => {store.getList()}return {getList}
}
