nebula/store/portfolio.js

import Vue from 'vue';
import { isBrowser } from '~/environment';

export const PORTFOLIO_API_PATH = '/api/console'

const getDefaultListData = () => {
  return {
    portfolios: [],
    pagination: {}
  }
}

export const state = () => {
  return {
    list: {
      fetching: false,
      data: getDefaultListData()
    },
    detail: {
      fetching: false,
      data: {}
    },
    articles: {
      articles: [],
      pagination: {}
    }
  }
}

export const mutations = {
  // 作品集列表
  updateListFetching(state, action) {
    state.list.fetching = action
  },
  updateListData(state, action) {
    state.list.data = action
  },
  updateExistingListData(state, action) {
    state.list.data.data.push(...action.data)
    state.list.data.pagination = action.pagination
  },

  // 作品集详情
  updateDetailFetching(state, action) {
    state.detail.fetching = action
  },
  updateDetailData(state, action) {
    state.detail.data = action.portfolio
  },
  updateArticleList(state, action) {
    state.articles.articles = action.articles
    state.articles.pagination = action.pagination
  },

  // 更新作品集阅读全文状态
  updateDetailRenderedState(state, action) {
    Vue.set(
      state.detail.data,
      'isRenderedFullContent',
      action == null ? true : action
    )
  }
}

export const actions = {
  // 获取作品集列表
  fetchList({commit}, params = {}) {

    // 清空已有数据
    commit('updateListData', getDefaultListData())
    commit('updateListFetching', true)
    let data = {
      page: params.page,
      topicUri: params.topic_uri
    }

    return this.$axios
      .$get(`${PORTFOLIO_API_PATH}/portfolios`, {
        params: data
      })
      .then(response => {
        commit('updateListFetching', false)
        commit('updateListData', response)
        if (isBrowser) {
          Vue.nextTick(() => {
            window.scrollTo(0,0);
          })
        }
      })
      .catch(error => commit('updateListFetching', false))
  },

  // 获取作品集详情
  fetchDetail({ commit }, params = {}) {
    // const delay = fetchDelay(
    //   isBrowser
    // )
    // if (isBrowser) {
    //   Vue.nextTick(() => {
    //     window.scrollTo(0, 300);
    //   })
    // }
    commit('updateDetailFetching', true)
    // commit('updateDetailData', {})
    return this.$axios
      .$get(`${PORTFOLIO_API_PATH}/portfolio/${params.portfolio_id}`)
      .then(response => {
        return new Promise(resolve => {
          commit('updateDetailData', response)
          commit('updateDetailFetching', false)
          resolve(response)
          // delay(() => {
          //   resolve(response)
          // })
        })
      })
      .catch(error => {
        commit('updateDetailFetching', false)
        return Promise.reject(error)
      })
  },
  fetchArticleList({commit}, params) {
    commit('updateDetailFetching', true)
    return this.$axios
      .$get(`${PORTFOLIO_API_PATH}/portfolio/${params.portfolio_id}/articles`, {
        params: {
          page: params.page
        }
      })
      .then(response => {
        commit('updateArticleList', response)
        commit('updateDetailFetching', false)
      })
      .catch(error => {
        commit('updateDetailFetching', false)
      })
  }
}