【Day06】Vue-cli & Vuex mapState

前言

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，感覺蠻有趣的下次也可以寫寫看
還剩最後一天了，加油！！！！(๑•̀ㅂ•́)و✧

📢 參考文章

• Vuex官網
• MDN 方法
• Learn Vue.js: The Collection
• Mapping for Vuex beginners
• 阮一峰 ECMAScript 6 入門
• Segmentfault