基于vue3的仿写cnodejs.org社区的webapp

1. 本项目用vue3实现，自定义plugin的alert和toast编写， vuex全局管理用户状态信息

demo

demo 访问
源码地址

vue3 的文档

文档入口

github地址

源码地址入口

部分代码

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "index",
  components: {  },
  setup() {
    // router 对象
    const router = useRouter();

    const tab = ref("all");
    // console.info(tab.value)
   
    const datalist = reactive({ list: [] });
    // console.info(datalist.list)

    const userId = ref(0)
    userId.value = computed(() => store.state.id || 0).value;


    // 请求接口
    const useListEffect = async () => {
      const result = await get(
        `/topics?page=${page.value}&tab=${tab.value}&limit=20`
      );
      if (result?.success && result?.data?.length) {
        datalist.list = [...datalist.list, ...result.data];
      }
    };

    // 跳转页面
    const goDetail = ({ id }) => {
      router.push(`/detail?id=${id}`);
    };

    useListEffect();

    return {
      tab,
      ...toRefs(datalist),
      goDetail,
      userId
    };
  },
};
</script>