7.vuex

認識Vuex

背景

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。
它採用 集中式存儲管理 應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
Vuex是一個提供在多個組件間共享狀態的插件，且狀態是響應式的。

單頁面狀態管理

State：狀態。（能夠當作就是data中的屬性）
View：視圖層，能夠針對State的變化，顯示不一樣的信息。
Actions：主要是用戶的各類操做：點擊、輸入等等，會致使狀態的改變。

<template>
    <div class="test">
        <div>當前計數: {{counter}}</div>
        <button @cli ck="counter+=1"> +1</button>
        <button @click="counter-=1">-1</button>
    </div>
</template>
<script>
export default {
    name: 'Helloworld',
    data () {
        return {
            counter: 0
        }
    }
}
</script>

多頁面狀態管理

不一樣界面的Actions都想修改同一個狀態,如今要作的就是將共享的狀態抽取出來,交給vuex。以後，每一個組件，按照規定好的規定，進行訪問和修改等操做。

Vuex狀態管理圖例

Vue components能夠直接到mutations（可是不建議這樣作）。Mutations中的操做都是同步操做，要是有異步操做就在actions中操做，操做完成以後再提交到mutations中進行同步操做。Devtools跟蹤不到異步操做。
Devtools是Vue開發的一個瀏覽器插件，能夠幫助記錄每次修改state的記錄

Vuex基本使用

Vuex核心概念

State

Vuex使用了單一狀態樹來管理應用層級的所有狀態。單一狀態樹可以讓咱們最直接的方式找到某個狀態的片斷，並且在以後的維護和調試過程當中，也能夠很是方便的管理和維護。

Getters

相似於組件中的計算屬性。當數據必須通過一系列變化以後再在頁面上使用時就用到計算屬性。
同理，若是是在state中的數據，須要進行操做後在頁面顯示，就用到getters屬性。

const store = new Vuex . Store({
    state: {
        students: [
            {id: 110,name:'why',age:18},
            {id: 111,name:'kobe',age:21},
            {id: 112,name:'lucy',age:25},
            {id: 113,name:'lilei',age:30},
        ]
    },
    getters: {
        //獲取學生年齡大於20的個數。
        greateragesCount: state =>{
            return state. students. filter(s => s.age >= 20) . length
        }
    }
})

Getters做爲參數和傳遞參數

若是咱們已經有了一個獲取全部年齡大於20歲學生列表的getters, 那麼代碼能夠這樣來寫

getters: {
    greaterAgesstus: state => {
        return state.students.filter(s => s.age >= 20)
    },
    greateragesCount: (state, getters) => {
        return getters.greaterAgesstus.length
    }
}

getters默認是不能傳遞參數的, 若是但願傳遞參數, 那麼只能讓getters自己返回另外一個函數.

Mutation

Vuex的store狀態的更新惟一方式：提交Mutation
Mutation主要包括兩部分：字符串的事件類型（type）;一個回調函數（handler）,該回調函數的第一個參數就是state。

Mutation狀態更新

mutation的定義方式：

mutations: {
    increment(state) {
        state.count++
    }
}

經過mutation更新

increment:function() {
    this.$store.commit('increment')
}

Mutation傳遞參數

在經過mutation更新數據的時候, 有可能咱們但願攜帶一些額外的參數。參數被稱爲是mutation的載荷(Payload)
當參數只有一個的時候，能夠在mutation中使用參數

decrement(state,n) {
    state.count -= n;
}

decrement:function() {
    this.$store.commit('decrement',2);
}

若是參數不是一個,一般會以對象的形式傳遞, 也就是payload是一個對象。再從對象中取出相關的信息。

changeCount(state.pay1oad) {
    state.count = payload.count;
}

changeCount:function () {
    this.$store.commit('changeCount'，{count: 0});
}

Mutation提交風格

Vue還提供了另一種風格, 它是一個包含type屬性的對象

this.$store.commit({
    type: 'changeCount'，
    count: 100
})

Mutation中的處理方式是將整個commit的對象做爲payload使用, 因此代碼沒有改變, 依然以下:

changeCount(state,pay1oad) {
    state.count = pay1oad.count
}

Mutation響應規則

Action

Module