【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)


<div class="alert alert-info"> 💡 這裡請搭配<a href="https://www.coderbridge.com/@ChihuahuaMH/a004c9f5124d4f77aca28badec788c8f">Day05 Vuex</a>的例子一起服用哦~ </div>

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',
    ])


西瓜榴槤擊 請不要噓我 圖源巴哈百科

<br>

快還要更快,精簡還要更精簡!當映射的計算屬性的名稱與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'
    }
},

<br>
尋思了許久,原來那麼簡單嗎...混在一起原來那麼簡單
我看了中文版文件完全無法心領神會,轉去英文和其他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,感覺蠻有趣的下次也可以寫寫看
還剩最後一天了,加油!!!!(๑•̀ㅂ•́)و✧


📢 參考文章

#javascript #Vue #Web #前端





學習 Vue.js 一段時間了, 會基本的語法,但做一些應用還是要看官方文件... 一邊查著一邊思考這些不是學過了嗎嗚嗚嗚 就跟剛認識的朋友一樣生疏 QQ 所以呢!! 這系列我會利用七天的時間將 Vue 重新、快速的學習! 搭配一些簡單的應用:)

留言討論