2020-05-13

六角鼠年全馬挑戰賽

8 分鐘閱讀文 (大約 1256 個字)

Vuex官方文檔閱讀筆記

最近要使用Vuex，但是用得很不順手，因此一邊閱讀官方文檔一邊做個紀錄。
（這個綠好好看喔）

什麼是Vuex？

Vuex的核心概念就是一個倉庫，存儲專案中的資料狀態。
Vuex中的儲存是響應式的，也就是說當其他元件讀取store中的狀態時，若是store中產生變化，相應的元件也會更新。

store中的狀態是不可以直接被改變的，只能透過提交（commit）Mutation的方式。

簡易的倉庫(store)使用方式

vuex起手式

npm install --save vuex

全域註冊元件 main.js
import Vuex from 'vuex'
Vue.use(Vuex)

在src中新增一個資料夾叫store，新增一個檔案叫index.js，這裡會彙整所有Vuex所有行為

index中也需要import vue & vuex

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    
});

index.js載入main.js中
main.js

import store from './store'

//some code

new Vue({
    el:'#app',
    router,
    /*****/
    store,
    /*****/
    components:{App},
    template:'<App/>'
})

創建一支檔案管理store

也可以放在一個額外的資料夾中
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

如何在元件中取用store

在根實例中新增，所有元件皆可取用store

new Vue({
    el:'#app',
    //注入vuex的store
    store
})

在元件中取用 - 使用this.$store前綴

在某元件中提交mutation，改變store中的資料狀態

methods:{
    increment(){
    //提交mutation
        this.$store.commit('increment');
        console.log(this.$store.state.count);
    }
}

store內的交互關係

*資料來源: 六角學院 Vue出一個電商網站

核心觀念 - State

使用Vuex是為了更好的追蹤資料的狀態變化，但是將所有資料一股腦丟進state中並不是最好選擇。若是元件內有專屬且必要的資料，就把它保留在元件中就好。

State

State類似Vue實例中的data屬性，他底下的資料必須是純值或是只含有純值屬性的物件。

如何在元件中取用state內的資料？
使用computed-計算屬性來回傳store中的資料，若是store中資料有更新，computed就會重新更新。

元件內調用state

computed:{
    count(){
    //取用store
        return this.$store.state.count;
    }
}

輔助函數 - mapState

若是需要使用計算屬性取用多個state資料，與其在computed內新增多個函式來回傳，可以使用mapState

元件內

//取用mapState
import { mapState } from 'vuex';

//寫法1 - 物件寫法
computed: mapState({
        //state為必須
    count: state => state.count
})

//寫法2 - 若是要使用的計算屬性跟state的資料名稱一樣
computed: mapState([
    'count'
    //this.count 為this.$store.state.count
])

//寫法3 - 與元件內其他計算屬性混用，展開物件屬性
computed:{
    localComputed(){
        return something
    },
    ...mapState({
        count: state => state.count
    })
}

核心觀念 - Getters

store中的計算屬性，若是我們需要對state中的某個資料做出一些調整後再使用，就可以使用Getter。
假使我們今天在做一個todolist，我們想要呈現列表中已完成的項目，我們會需要先過濾todos陣列，過濾出done屬性為true的項目再呈現，通常我們會在元件中使用computed屬性來完成。
但是假設有很多元件都需要使用到這個「已完成列表」的資料，那就可以把原始的todos陣列存在state中，然後使用store中的Getter，先過濾出來，再在各元件中使用。

跟computed類似，getters只有在它依賴的資料發生改變時才會被重新觸發。

使用

getters接收的第一個參數固定為state

store/index.js

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
  //取出已經完成的
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

在元件中取用
某元件內

1	store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

getter也可以接受其他getter作為參數

store/index.js
getters:{
                    //第二個參數為store的getter
    countDoneTodos: (state, getter)=>{
        return getter.doneTodos.length;
    }
}

元件中使用

computed:{
    doneTodosCount(){
        return this.$store.getters.countDoneTodos
    }
}

使用閉包來傳入外部參數給getter

若是想要在state內資料中進行搜尋（標題／作者／某些屬性……，這裡的範例使用搜尋id），就可以使用這招

store/index.js

getters:{
    //ES6寫法
    getTodoById:(state) => (id) =>{
        return state.todos.find(todo => todo.id === id)
    }
}

元件中使用

1	this.$store.getters.getTodoById(2) //// -> { id: 2, text: '...', done: false }

輔助函數 - mapGetters

元件內

import { mapGetters } from 'vuex'

//元件內
computed:{
    //其他計算屬性
    ...mapGetters([
        'doneTodosCount',
        'anotherGetter'
    ])
}

然後就可以做為一般computed屬性使用

若是想將getter屬性在元件中另外取名，就使用物件

1
2
3

...mapGetters({
  doneCount: 'doneTodosCount'
})

資料來源

Vuex官方文檔
六角學院 - Vue出一個電商網站

# Vue, Vuex, 閱讀筆記