aiDoc/examples/frontend/pinia-example.md
Pinia store 负责全局状态、异步动作和跨页面共享数据,不负责页面渲染细节。
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { getOrderList } from '@/api/order'
export const useOrderStore = defineStore('order', () => {
const list = ref([])
const total = ref(0)
const loading = ref(false)
const hasData = computed(() => list.value.length > 0)
const fetchList = async (params) => {
loading.value = true
try {
const res = await getOrderList(params)
if (res.code === 0) {
list.value = res.data.list
total.value = res.data.total
}
return res
} finally {
loading.value = false
}
}
const reset = () => {
list.value = []
total.value = 0
}
return {
list,
total,
loading,
hasData,
fetchList,
reset
}
})
ref + computed + async action 是当前仓库里很自然的组织方式web/src/pinia/modules/user.jsweb/src/pinia/modules/router.jsweb/src/pinia/modules/dictionary.js