Vue实现CNode

效果实现思路及过程：

1. 通过vuex调用CNdoe接口，
2. 通过Tap切换来实现跳转
3. 通过dayjs插件是现实事件
4. 获取屏幕可视区实现回到顶部

效果代码实现：

 vuex代码实现思路：

我们通过async和await异步获取数据，然后进行赋值，接口文档https://cnodejs.org/api

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    homeData:[],
    status:'all',
    aboutData:{}
  },
  mutations: {
    SET_HOME(state,data){
      state.homeData=data
    },
    SET_TAP(state,status){
      state.status=status;
      console.log(status)
    },
    SET_ABOUT(state,data){
      state.aboutData=data
    }
  },
  actions: {
    async setHome({commit},tab='all'){
      await axios.get('https://cnodejs.org/api/v1/topics?tab='+tab).then(res=>{
        console.log(res.data.data);
        commit('SET_HOME',res.data.data)
      })
    },
    setTap({commit},status){
      commit('SET_TAP',status)
    },
    setAbout({commit},id){
      axios.get('https://cnodejs.org/api/v1/topic/'+id).then(res=>{
        console.log(res.data.data)
        commit('SET_ABOUT',res.data.data)