前言
Day06 今天探討的是mapState，其他的map有空再補但其實都差不多。
會簡單的教學一下vue-cli建立專案，因為cdn一直沒辦法把map的部分搞定：（
今天內容會比較少
準備好惹就開始囉～
Vue-cli建立專案
我們先打開cmder（這是我另外裝的，一般windows是cmd），輸入vue create 專案名稱
他會問你要預設（default）還是自訂，這裡選擇預設就好
不喜歡eslint的同學可以不要添加
去自訂那邊取消掉
請無視我還沒更新
安裝完成他會跟你說用下面兩個指令開始
cd
專案名稱
就是把位置移動到你的專案目錄下npm run serve
執行當前目錄的專案
我們先移到專案目錄下裝vuex
npm install vuex --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()
let arr = ['a', 'b', 'c']
console.log(Object.keys(arr)) // console: ['0', '1', '2']
let obj1 = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.keys(obj1)) // console: ['0', '1', '2']
let obj2 = { 100: 'a', 2: 'b', 7: 'c' }
console.log(Object.keys(obj2)) // console: ['2', '7', '100']
Object.keys()方法會返回一個給定物件的屬性排列過的陣列。
在ES5如果不是物件會噴錯；ES6則強制轉型成物件 真霸道
Object.keys("foo");
// TypeError: "foo" is not an object (ES5)
Object.keys("foo");
// ["0", "1", "2"] (ES6)
Array.prototype.map()
// 語法，↓↓傳遞3個參數：元素、索引、陣列。
new_arr = arr.map（function callback（currentValue [,index [,array] ]）{ //... } [，thisArg ]）
// 例子
let arr = [1, 4, 9, 16];
let map = arr.map( x => x * 2 );
console.log(map); // Array [2, 8, 18, 32]
Array.prototype.map 方法創建一個新陣列，其結果是該陣列中的每個元素都調用一個提供的函數後返回的結果。像這裡是建立一個原陣列（arr）乘2的新陣列（map）
mapState
今天元件想取得多個state，我要怎麼寫呢？
// 元件部分
computed: {
count() {
return this.$store.state.count
},
payload() {
return this.$store.state.payload
}
}
哇，現在只取兩個state，如果我今天要取更多個不就一直重複～repeat～
n個return this.$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的物件展開運算符（...），用於取出參數物件的所有可遍歷屬性，拷貝到當前物件之中。
let obj1 = { a: 3, b: 4 }
let obj2 = { ...obj1 }
obj1 // { a: 3, b: 4 }
let string = {...'hello'}
string // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
如果想讓mapState與其他computed一起用，那就用...mapState吧！
這裡示範count計算奇數偶數～
computed : {
...mapState(['count']),
parity(){
return this.count % 2 == 0 ? 'even' : 'odd'
}
},
尋思了許久，原來那麼簡單嗎...混在一起原來那麼簡單
我看了中文版文件完全無法心領神會，轉去英文和其他doc才頓悟(๑•́ ₃ •̀๑)
圖源痞客幫
mapGetters
跟mapState一樣，如果你的getter很多的話～這時就找mapGetters來幫忙！
元件地方我們原本這樣寫：
computed: {
upperName() {
return this.$store.getters.upperName;
},
}
用了mapGetters之後就會是醬子，Do Re Mi So～
computed: {
mapGetters([
'upperName',
]),
}
如果你突然想把mapGetters裡的屬性取別名，我們可以用物件形式：
mapGetters({
// 把 `this.nameToUpper` 映射為 `this.$store.getters.upperName`
nameToUpper: 'upperName'
})
// 上面的寫法就等於底下這樣
computed: {
nameToUpper() {
return this.$store.getters.upperName;
},
}
...mapGetters也是跟...mapState一樣，就是混入computed裡面～
小小心得
若觀念或內容有誤請不吝指教，謝謝您( ᐛ)パァ
今日主題寫的mapState真的是沒接觸過的：（
查了資料花了很久的時間，才發現原來使用上其實不難
（但實際運用我可能會爆炸吧XD）
唉...懶癌發作起來真的沒救了
如果今天還有空再把剩下的map補上吧 （用法上都跟mapState差不多
看來vue-router和axios可能沒望了QQQQQ
雖然我也不知道這個可以寫什麼
今天還有看Vue-i18n，感覺蠻有趣的下次也可以寫寫看
還剩最後一天了，加油！！！！(๑•̀ㅂ•́)و✧
 – tendrils 與 scheduler_@techbridge_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
