重复请求，不要多次请求数据，
11-3将store当中的数组转为对象
interface ListProps
{
}
fetchColumns(state,rawData){
state.columns=arrToObj(rawData.data.list){,
const list=computed(()=>{});
getColumns:(state)=>{
return objToArr(statecolumns);}
11-4防止重复请求逻辑分析
fetchColumns({state,commit}){
if(state.columns.isloaded){
return assyncAndCommit('/columns','fetchColumns',)},
fetchColumns
post请求的时候
文章详情页的时候，文章作者和列表信息没有出现，者两个api返回的数据不太相同
const currentPost=state.posts.data[id]
if(!currentpost||
fetchPosts({ state, commit }, cid) {
if (!state.posts.loadedColumns.includes(cid)) {
return asyncAndCommit(`/columns/${cid}/posts`, 'fetchPosts', commit, { method: 'get' }, cid)
}
},
fetchPost({ state, commit }, id) {
const currentPost = state.posts.data[id]
if (!currentPost || !currentPost.content) {
return asyncAndCommit(`/posts/${id}`, 'fetchPost', commit)
} else {
return Promise.resolve({ data: currentPost })
}
},
11-8useloadMore实现分析
import { useStore } from 'vuex'
import { ref, computed, ComputedRef } from 'vue'
interface LoadParams {
currentPage: number;
pageSize: number;
}
const useLoadMore = (actionName: string, total: ComputedRef<number>,
params: LoadParams = { currentPage: 2, pageSize: 5 }) => {
const store = useStore()
const currentPage = ref(params.currentPage)
const requestParams = computed(() => ({
currentPage: currentPage.value,
pageSize: params.pageSize
}))
const loadMorePage = () => {
store.dispatch(actionName, requestParams.value).then(() => {
currentPage.value++
})
}
const isLastPage = computed(() => {
return Math.ceil(total.value / params.pageSize) < currentPage.value
})
return {
loadMorePage,
isLastPage,
currentPage
}
}
export default useLoadMore
