从零搭建网站（第三天）
出去旅游度假了半年，回来继续学习编程。
上次基本的页面组件是完成了，但是后台数据获取和交互都没用做，只有一个空壳子，因为本来是用vue2+js+vuex,一时要迁移到自己从没用过的vue3+ts+pinia还是不习惯，因为没有需求，做东西最忌讳好高骛远，可以先把初稿完成再慢慢改，所以还是用我自己习惯的语法，所幸ts一般情况下不定义类型也有默认的any,vuex和pinia微弱的性能差异在小项目里可以忽略不计，vue3如果报错只要网上查一下api和改动就可以解决，毕竟有vue2的底子在，看vue3代码基本不费力，只是一些写法改动。
第一个问题是后台数据，可以用我自己擅长的python的flask框架但没有必要，直接使用mock模拟即可，毕竟专注于前端，后端略懂即可，使用mock与自己在后台返回数据不同的是mock不需要解决跨域问题，直接引入mock文件即可
引入mock文件
自己的json文件（作为数据库使用）
使用vuex只需要记得几个点，使用app(Vue实例).use即可，然后其中，state表示状态，mutation用于改变状态，action进行异步操作，实际中使用action传递给mutation进行ajax请求，异步操作使用async和await函数，这几句话虽然简单，但是后面蕴含要不少js和vue基础知识，需要多练，这里展示我的代码作为参考。
这样，数据的交互就完成了，前端通过异步ajax请求（我的代码里通过对axios库进行封装便于使用），后端返回所需数据（通过mockjs完成模拟），再将数据给前端用于呈现页面。
图中的图片是一模一样的，这并没有任何问题，可以根据自己需要修改图片的url即可。