《web前端全棧成長計劃》Vue第四章學習筆記（上）（web全棧開發進階之路）

本文摘自 論壇?https://bbs.huaweicloud.com/forum/forum.php?mod=viewthread&tid=71831&authorid=70062&page=1?筆者對vue學習的筆記。由于vue筆者也是剛剛接觸，基本上都是以觀看視頻和具體動手實踐的方式進行。為防止迷路，特收集整理成本博文。

文中的圖片、代碼很多來自于教程本身，但都來自于本人實踐后截圖和拷貝的結果，特此說明。

Vue?第四章 Vuex

66 vuex：counter應用的vuex實戰1

66.1 安裝vuex

66.2 實戰

創建vuex的核心管理對象模塊vuex

編寫store.js ,main.js及App.vue

store.js

/*?vuex的核心管理對象模塊?*/ import?Vue?from?'vue' import?Vuex?from?'vuex' //?聲明使用 Vue.use(Vuex) //?狀態 const?state?=?{ ??count:?0??//?從App的data移過來，初始化狀態 } //?包含多個更新state函數的對象 const?mutations?=?{ ??//?本質上只有+1和-1兩個操作 ??//?增加的mutation ??INCREMENT(state){ ????state.count?++ ??}, ??//?減少的mutation ??DECREMENT(state){ ????state.count?-- ??} } //?包含多個對應事件回調函數的對象 const?actions?=?{ ??//?一個函數就是一個action ??//?增加 ??increment({commit}){ ????//?提交一個mutation?commit最終導致一個mutation調用 ????commit('INCREMENT') ??}, ??decrement({commit}){ ????commit('DECREMENT') ??}, ??//?帶條件的action ??incrementIfOdd({commit,state}){ ????//?提交一個mutation?commit最終導致一個mutation調用 ????if(state.count?%2?===?1){ ??????commit('INCREMENT') ????} ??}, ??//?異步action ??incrementAsync({commit}){ ????//?在action中可以直接執行異步代碼 ????setTimeout(()?=>?{ ??????commit('INCREMENT') ????},1000) ??} } //?包含多個getter計算屬性函數的對象 const?getters?=?{ ??evenOrOdd?(state)?{ ????return?state.count?%?2?===?0???'偶數':?'奇數' ??} } //?以下都是固定的 export?default?new?Vuex.Store({ ??state,?//?狀態 ??mutations,?//?包含多個更新state函數的對象 ??actions,?//?包含多個對應事件回調函數的對象 ??getters?//?包含多個getter計算屬性函數的對象 })

main.js. 引入store對象

/* 入口JS ?*/ import?Vue?from?'vue' import?App?from?'./App.vue' import?store?from?'./store' //?創建vm /*?eslint-disable?no-new?*/ new?Vue({ ??el:?'#app', ??components:?{App},?//?映射組件標簽 ??template:?'',?//?指定需要渲染到頁面的模板 ??store??//?會產生?$store對象，有state，getter屬性。 })

App.vue

從上面可以看出，App.cue變得異常簡單。很多邏輯都遷移到了store.js

今后，如果store.js比較多，可能也會將

state,?//?狀態 ??mutations,?//?包含多個更新state函數的對象 ??actions,?//?包含多個對應事件回調函數的對象 ??getters

這四個定義放到多個文件中。分別去定義。

66.3 演示效果：

67 vuex：counter應用的vuex實戰2

使用mapState, mapGetters, mapActions簡化映射：

App.vue：

當回調函數跟action的函數名不一致時，可以用以下方法做對照：

比如：

store.js改為

const?getters?=?{ ??evenOrOdd2?(state)?{ ????return?state.count?%?2?===?0???'偶數':?'奇數' ??} }

App.vue的mapGetters改為：

...mapGetters({evenOrOdd:?'evenOrOdd2'})?//后面是getters的名字，前面是app中回調函數的名字

執行效果如下：

跟前面的一致。

68 vuex結構圖

backend api：后臺api

在action可以發送后臺請求，跟后臺交互

devtools: chrome開發工具

監視者mutation的調用。

我們將具體的vuex結構圖完善一下:

、

69 vuex版本的todolist——創建結構

70 vuex版本的todolist——header組件

71 vuex版本的todolist——list和item組件

72 vuex版本的todolist——footer組件

實戰配置：

vuex用來管理多組件共享的狀態。

分析：

todos狀態數據應該放入到vuex的store中。

真實項目：拆分成多個模塊

App.vue

main.js

//?The?Vue?build?version?to?load?with?the?`import`?command //?(runtime-only?or?standalone)?has?been?set?in?webpack.base.conf?with?an?alias. /*?入口js?*/ /*?創建vue實例?*/ import?Vue?from?'vue'?/*?注意大小寫?*/ import?App?from?'./App' import?store?from?'./store' import?'./base.css' //?Vue.config.productionTip?=?false /*?eslint-disable?no-new?*/ /*?對應index.html的app?*/ /*?引入組件?將組件的映射名變為標簽?組件一般是一個局部功能界面，包含了html，css，js，img等資源?*/ /*?模板插入到el匹配的頁面上的div去?參見?生命周期?當時判斷了?是否有template選項，如果有，則編譯template，掛載到頁面上去?*/ new?Vue({ ??el:?'#app', ??components:?{?App?}, ??template:?'', ??store })

store/state.js

/*?狀態對象?*/ export?default?{ ??todos:?[] }

store/index.js

/*?vuex?最核心的管理對象?*/ import?Vue?from?'vue' import?Vuex?from?'vuex' import?state?from?'./state' import?mutations?from?'./mutations' import?actions?from?'./actions' import?getters?from?'./getters' Vue.use(Vuex) export?default?new?Vuex.Store({ ??state, ??mutations, ??actions, ??getters })

store/actions.js

//?接收xxx.vue的組件通知，觸發mutation。js調用間接更新狀態的方法的對象 import?{?ADD_TODO,DELETE_TODO,SELECT_ALL_TODOS,CLEAR_ALL_COMPLETED?}?from?'./mutation-types' export?default?{ ??addTodo?({commit},todo)?{ ????//?提交一個mutation?commit最終導致一個mutation調用 ????//?無論是什么類型，都用對象包起來 ????commit(ADD_TODO,?{todo}) ??}, ??deleteTodo?({commit},index)?{ ????//?無論是什么類型，都用對象包起來 ????commit(DELETE_TODO,?{index}) ??}, ??selectAllTodos?({commit},check)?{ ????commit(SELECT_ALL_TODOS,?{check}) ??}, ??clearAllCompleted?({commit})?{ ????commit(CLEAR_ALL_COMPLETED) ??} }

store/getters.js

//?包含所有state的所有計算屬性 export?default?{ ??//總數 ??totalCount(state)?{ ????return?state.todos.length ??}, ??//完成的數量 ??completeCount(state)?{ ????return?state.todos.reduce((preTotal,?todo)?=>?{ ??????return?preTotal?+?(todo.complete???1?:?0) ????},0) ??}, ??//判斷是否全部選中 ??isAllSelected?(state,?getters)?{ ????//?return?getters.totalCount?===?getters.completeCount??&&?getters.totalCount?>?0 ????return?getters.totalCount?===?getters.completeCount??&&?state.todos.length?>?0 ??} }

stores/mutation-types.js

/* ??所有mutation?的名稱常量 ?*/ export?const?ADD_TODO?=?'add_todo'??//?添加todo export?const?DELETE_TODO?=?'delete_todo'??//?刪除todo export?const?SELECT_ALL_TODOS?=?'select_all_todos'?//?選擇所有 export?const?CLEAR_ALL_COMPLETED?=?'clear_all_completed'?//?清除已完成的todo

stores/mutation.js

/* ??包含多個由action觸發，直接更新狀態方法的對象 ?*/ import?{ADD_TODO,DELETE_TODO,SELECT_ALL_TODOS,CLEAR_ALL_COMPLETED}?from?'./mutation-types' export?default?{ ??//?這里變成中括號比較難以理解 ??[ADD_TODO]?(state,?{todo})?{ ????state.todos.unshift(todo) ??}, ??[DELETE_TODO]?(state,?{index})?{ ????state.todos.splice(index,1) ??}, ??[SELECT_ALL_TODOS]?(state,?{check})?{ ????state.todos.forEach(todo?=>?todo.complete?=?check) ??}, ??[CLEAR_ALL_COMPLETED]?(state)?{ ????state.todos?=?state.todos.filter(?todo?=>?!todo.complete) ??} } //?從組件開始，到action，到mutation，再更新狀態

components/TodoHeader.vue

components/TodoList.vue

components/TodoItem.vue

components/TodoFooter.vue

實戰效果：

新增后：

刪除：

清除已完成：

（待續）

JavaScript web前端 Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。