圖片切換範例
API 抽離管理,清楚管理資料
axios create 的物件會變成 axios 的實體
axios interceptors 攔截器,可以做驗證檢查
@/api/photoRequest.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| import axios from "axios";
const photoRequest = axios.create({ baseURL: "https://vue-lessons-api.herokuapp.com/", });
photoRequest.interceptors.request.use( (config) => { if (true) throw { response: { data: "資料不得為空" } }; return config; }, (error) => { return Promise.reject(error); } );
photoRequest.interceptors.response.use( (response) => { console.log(response); return response; }, (error) => { return Promise.reject(error); } );
export const getPhotoRequest = () => photoRequest.get("/photo/list");
|
api 模組入口
index.js 做各模組的分類,當成模組的入口,方便管理,components 只需引入 index.js
@/api/index.js
1 2
| import { getPhotoRequest } from "./photoRequest.js"; export const apiGetPhotoRequest = getPhotoRequest;
|
資料管理
store/index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
| import { createStore } from "vuex"; import axios from "axios"; import { apiGetPhotoRequest } from "../api"; export default createStore({ state: { photoArr: [], idx: 0, isLoad: false, }, actions: { async handInit({ commit }) { try { const res = await apiGetPhotoRequest(); commit("init", res.data); return res.data; } catch (error) { console.log(error.response.data); } }, handLoadState({ commit }, bool) { commit("loadState", bool); }, handAdd({ commit }) { commit("Add"); }, handRemove({ commit }) { commit("Remove"); }, }, mutations: { init(state, payload) { state.photoArr = payload; console.log(state.photoArr); }, loadState(state, bool) { state.isLoad = bool; }, Add(state) { state.idx++; if (state.idx > state.photoArr.length - 1) { state.idx = 0; } }, Remove(state) { state.idx--; if (state.idx < 0) { state.idx = state.photoArr.length - 1; } }, }, getters: { isLoad(state) { return state.isLoad; }, photoArr(state) { return state.photoArr; }, idx(state) { return state.idx; }, }, });
|
組件
App.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| import { onMounted } from "vue"; import { useStore } from "vuex"; import ImageBox from "./components/ImageBox/index.vue"; import LoadingBar from "./components/LoadingBar.vue"; export default { components: { LoadingBar, ImageBox, }, setup() { const store = useStore();
const handImgLoad = (imgArr) => { let i = 0; imgArr.forEach((image) => { const newImage = new Image(); newImage.src = image.url; newImage.onload = () => { i++; store.dispatch("handLoadState", i === imgArr.length); }; }); };
const init = () => { store.dispatch("handInit").then((res) => { handImgLoad(res); }); };
onMounted(() => { init(); });
return {}; }, };
|
1 2 3 4
| <div id="app"> <LoadingBar /> <ImageBox /> </div>
|
loading 組件
components/LoadingBar.vue
1 2 3 4 5 6 7 8 9 10 11
| import { computed } from "vue"; import { useStore } from "vuex"; export default { setup() { const store = useStore();
const isLoad = computed(() => store.getters.isLoad);
return { isLoad }; }, };
|
1
| <img v-show="!isLoad" class="load" src="../assets/load.gif" alt="" />
|
圖片組件
components/ImageBox/index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| import { computed } from "vue"; import { useStore } from "vuex"; import ImgShow from "./ImgShow.vue"; import ChangeBtn from "./ChangeBtn.vue"; export default { components: { ImgShow, ChangeBtn, }, setup() { const store = useStore();
const isLoad = computed(() => store.getters.isLoad);
return { isLoad }; }, };
|
1 2 3 4
| <div class="box" v-show="isLoad"> <ImgShow /> <ChangeBtn /> </div>
|
圖片切換按鈕
components/ImageBox/ChangeBtn.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| import { computed } from "vue"; import { useStore } from "vuex"; export default { setup() { const store = useStore();
const addImg = () => { store.dispatch("handAdd"); };
const removeImg = () => { store.dispatch("handRemove"); };
return { addImg, removeImg }; }, };
|
1 2 3 4
| <div class="btnbox"> <a @click="removeImg" href="javascript:;">上一張</a> <a @click="addImg" href="javascript:;">下一張</a> </div>
|
圖片顯示組件
components/ImageBox/ImgShow.vue
1 2 3 4 5 6 7 8 9 10 11 12 13
| import { computed } from "vue"; import { useStore } from "vuex"; export default { setup() { const store = useStore();
const photoArr = computed(() => store.getters.photoArr);
const idx = computed(() => store.getters.idx);
return { photoArr, idx }; }, };
|
1 2 3 4 5 6 7 8 9 10
| <div> <img class="img" v-for="(item, s) in photoArr" v-show="idx === s" :key="item.url" :src="item.url" alt="" /> </div>
|
以上是我的學習筆記,希望也有幫助到你哦 😀
🚀實體工作坊分享
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。