【Day06】Vue-cli & Vuex mapState - CoderBridge

Day06 今天探討的是mapState，其他的map有空再補但其實都差不多。

會簡單的教學一下vue-cli建立專案，因為cdn一直沒辦法把map的部分搞定：（. Re：Vue七等分的學習【Day00】系列介紹【Day01】實例,模板&條件渲染【Day02】計算屬性,監聽器&事件處理【Day03】列表渲染&表單綁定【Day04】元件【Day05】Vuex【Day06】Vue-cli&VuexmapState【Day07】總複習！摻在一起做成...【Day06】Vue-cli&VuexmapState吉娃娃🐶inRe：Vue七等分的學習前言Day06今天探討的是mapState，其他的map有空再補但其實都差不多。

會簡單的教學一下vue-cli建立專案，因為cdn一直沒辦法把map的部分搞定：（今天內容會比較少準備好惹就開始囉～Vue-cli建立專案我們先打開cmder（這是我另外裝的，一般windows是cmd），輸入vuecreate專案名稱他會問你要預設（default）還是自訂，這裡選擇預設就好不喜歡eslint的同學可以不要添加去自訂那邊取消掉請無視我還沒更新安裝完成他會跟你說用下面兩個指令開始cd專案名稱就是把位置移動到你的專案目錄下npmrunserve執行當前目錄的專案我們先移到專案目錄下裝vuexnpminstallvuex--save如果你也懶懶...那就學我吧！！到Scrimba找一門Vuex的課，在playground上改改改改大魔改！！底下就用這個示範囉～原始碼這部分沒興趣可先跳過，有興趣再閱讀。

vuex源码：深入vuex之辅助函数mapState寫得非常詳盡，閱讀完後對於「為什麼會這樣運作」比較了解。

以下就簡單介紹一下他裡面所提到的方法Array.isArray()Array.isArray([1000,993,986]);//true Array.isArray([undefined]);//true Array.isArray({chihuahua:cute});//false Array.isArray('Array');//false isArray()就是檢查value部分是不是陣列，管你裡面放吉娃娃還是可爾必思，只要是陣列形式的他就給你true。

注意！是陣列形式，不是像第四個寫"Array"那種意思喔！Object.keys()letarr=['a','b','c'] console.log(Object.keys(arr))//console:['0','1','2'] letobj1={0:'a',1:'b',2:'c'} console.log(Object.keys(obj1))//console:['0','1','2'] letobj2={100:'a',2:'b',7:'c'} console.log(Object.keys(obj2))//console:['2','7','100'] Object.keys()方法會返回一個給定物件的屬性排列過的陣列。

在ES5如果不是物件會噴錯；ES6則強制轉型成物件真霸道Object.keys("foo"); //TypeError:"foo"isnotanobject(ES5) Object.keys("foo"); //["0","1","2"](ES6) Array.prototype.map()//語法，↓↓傳遞3個參數：元素、索引、陣列。

new_arr=arr.map（functioncallback（currentValue[,index[,array]]）{//...}[，thisArg]） //例子 letarr=[1,4,9,16]; letmap=arr.map(x=>x*2); console.log(map);//Array[2,8,18,32] Array.prototype.map方法創建一個新陣列，其結果是該陣列中的每個元素都調用一個提供的函數後返回的結果。

像這裡是建立一個原陣列（arr）乘2的新陣列（map）💡這裡請搭配Day05Vuex的例子一起服用哦～mapState今天元件想取得多個state，我要怎麼寫呢？//元件部分 computed:{ count(){ returnthis.$store.state.count }, payload(){ returnthis.$store.state.payload } } 哇，現在只取兩個state，如果我今天要取更多個不就一直重複～repeat～n個returnthis.$store.state.xxx版面又長又亂的Q_Q有沒有辦法能夠快速簡潔一點呢？這就請我們輔助函數mapState圖源CSDN以下示範count：computed:mapState([ count:state=>state.count, //↓↓傳字符串參數'count'等同state=>state.count countAlias:'count', ]) 西瓜榴槤擊請不要噓我圖源巴哈百科快還要更快，精簡還要更精簡！當映射的計算屬性的名稱與state的子節點名稱相同時，我們也可以給mapState傳一個字符串陣列。

computed:mapState([ //映射this.count為store.state.count，payload同理 'count', 'payload' ]) 記住！！mapState會返回一個物件！...mapState前面三個點不是無言的意思這是ES6的物件展開運算符（...），用於取出參數物件的所有可遍歷屬性，拷貝到當前物件之中。

letobj1={a:3,b:4} letobj2={...obj1} obj1//{a:3,b:4} letstring={...'hello'} string//{0:"h",1:"e",2:"l",3:"l",4:"o"} 如果想讓mapState與其他computed一起用，那就用...mapState吧！這裡示範count計算奇數偶數～computed:{  ...mapState(['count']),  parity(){    returnthis.count%2==0?'even':'odd'   } }, 尋思了許久，原來那麼簡單嗎...混在一起原來那麼簡單我看了中文版文件完全無法心領神會，轉去英文和其他doc才頓悟(๑•́₃•̀๑)圖源痞客幫mapGetters跟mapState一樣，如果你的getter很多的話～這時就找mapGetters來幫忙！元件地方我們原本這樣寫：computed:{ upperName(){ returnthis.$store.getters.upperName; }, } 用了mapGetters之後就會是醬子，DoReMiSo～computed:{ mapGetters([ 'upperName', ]), } 如果你突然想把mapGetters裡的屬性取別名，我們可以用物件形式：mapGetters({ //把`this.nameToUpper`映射為`this.$store.getters.upperName` nameToUpper:'upperName' }) //上面的寫法就等於底下這樣 computed:{ nameToUpper(){ returnthis.$store.getters.upperName; }, } ...mapGetters也是跟...mapState一樣，就是混入computed裡面～小小心得若觀念或內容有誤請不吝指教，謝謝您(　ᐛ)パァ今日主題寫的mapState真的是沒接觸過的：（查了資料花了很久的時間，才發現原來使用上其實不難（但實際運用我可能會爆炸吧XD）唉...懶癌發作起來真的沒救了如果今天還有空再把剩下的map補上吧（用法上都跟mapState差不多看來vue-router和axios可能沒望了QQQQQ雖然我也不知道這個可以寫什麼今天還有看Vue-i18n，感覺蠻有趣的下次也可以寫寫看還剩最後一天了，加油！！！！(๑•̀ㅂ•́)و✧📢參考文章Vuex官網MDN方法LearnVue.js:TheCollectionMappingforVuexbeginners阮一峰ECMAScript6入門Segmentfault#javascript#Vue#Web#前端吉娃娃🐶FollowFollowing學生@台中科技大學一隻研究web的吉娃娃ლ(╹◡╹ლ)你可能感興趣的文章關於chrome效能檢測工具的一點心得m6fishJavaScript:Scope&HoistingNicolakacha[JavaScript05]函式functiontzutzu858PreviousNextComments提交送出編輯提交送出編輯提交送出回覆提交送出Re：Vue七等分的學習【Day00】系列介紹【Day01】實例,模板&條件渲染【Day02】計算屬性,監聽器&事件處理【Day03】列表渲染&表單綁定【Day04】元件【Day05】Vuex【Day06】Vue-cli&VuexmapState【Day07】總複習！摻在一起做成...歡迎回家×使用Github帳號登入使用Google帳號登入取消免費加入CoderBridge×使用Github帳號註冊使用Google帳號註冊取消