vue實踐之vuex

vue實踐05之vuex

getter方法

有時候咱們須要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}
複製代碼

若是有多個組件須要用到此屬性，咱們要麼複製這個函數，或者抽取到一個共享函數而後在多處導入它——不管哪一種方式都不是很理想。

Vuex 容許咱們在 store 中定義「getter」（能夠認爲是 store 的計算屬性）。就像計算屬性同樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。

1. Getter 接受 state 做爲其第一個參數：

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            state.count++;
        },
        reduce(state) {
            state.count--;
        }
    },
    getters: {
        countAdd100: state => {
            return state.count + 100
        }
    }
})
複製代碼

2. 在組件中引入getters

import { mapState, getters } from "vuex";
3. 在組件中訪問getters

computed: {
    countAdd1001() {
      return this.$store.getters.countAdd100;
    }
  }
複製代碼

4. mapGetters 輔助函數
   mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性,要求局部計算屬性和getter中定義的方法名同樣，相似mapState數組。

computed: {
    ...mapGetters([
      "countAdd100"
    ])
  }
複製代碼

5. 所有代碼

• count.vue代碼以下：

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <!--<h3>{{$store.state.count}}</h3>-->
        <h6>{{countAdd100}}</h6>
        <h6>{{countAdd1001}}</h6>
        <div>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('reduce')">-</button>
</div>
    </div>
</template>
<script>
import store from "@/vuex/store";
import { mapState, getters, mapGetters } from "vuex";
export default {
  data() {
    return {
      msg: "Hello Vuex"
    };
  },
  computed: {
    ...mapGetters([
      "countAdd100"
    ]),
    countAdd1001() {
      return this.$store.getters.countAdd100;
    }
  },

  store
};
</script>
複製代碼

• store.js代碼

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            state.count++;
        },
        reduce(state) {
            state.count--;
        }
    },
    getters: {
        countAdd100: state => {
            return state.count + 100
        }
    }
})

export default store
複製代碼

Mutation方法

1. 更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})
複製代碼

你不能直接調用一個 mutation handler。這個選項更像是事件註冊：「當觸發一個類型爲 increment 的 mutation 時，調用此函數。」要喚醒一個 mutation handler，你須要以相應的 type 調用 store.commit 方法：

store.commit('increment')
複製代碼

2. 提交載荷（Payload） 你能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）：

mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)
複製代碼

3. 在大多數狀況下，載荷應該是一個對象，這樣能夠包含多個字段而且記錄的 mutation 會更易讀：

<button @click="$store.commit('incrementObj',{amount:100})">+100</button>

<button @click="$store.commit({type:'incrementObj',amount:1000})">+1000</button>
複製代碼

Action

1. action定義
   Action 相似於 mutation，不一樣在於：

• Action 提交的是 mutation，而不是直接變動狀態。
• Action 能夠包含任意異步操做。 下面代碼中incrementAsync模擬了一個異步操做。

actions: {
        addAction({ commit }) {
            commit("add")
        },
        reduceAction({ commit }) {
            commit("reduce")
        },
        incrementAsync({ commit }) {
            setTimeout(() => {
                commit('add')
            }, 1000)
        }
    }
複製代碼

Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象，所以你能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters。當咱們在以後介紹到 Modules 時，你就知道 context 對象爲何不是 store 實例自己了。
mutation 必須同步執行這個限制麼？Action 就不受約束！咱們能夠在 action 內部執行異步操做：

incrementAsync({ commit }) {
            setTimeout(() => {
                commit('add')
            }, 1000)
        }
複製代碼

2. dispactch方法調用action
   在組件中調用action，代碼以下：

methods: {
            increment(){
                this.$store.dispatch("addAction");
            },
            decrement() {
                this.$store.dispatch("reduceAction")
            },
            incrementAsync() {
                this.$store.dispatch("incrementAsync")
            }
        }
複製代碼

3. mapAactions方法調用action
   首先引用mapActions,import { mapActions} from "vuex"; 實例代碼以下：

methods: {
    ...mapActions([
      'addAction', // 將 `this.increment()` 映射爲 `this.$store.dispatch('addAction')`

      // `mapActions` 也支持載荷：
      'reduceAction' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.dispatch('reduceAction')`
    ]),
    ...mapActions({
      asyncAdd: 'incrementAsync' // 將 `this.asyncAdd()` 映射爲 `this.$store.dispatch('incrementAsync')`
    })
  }
複製代碼

4. 組合action
   Action 一般是異步的，那麼如何知道 action 何時結束呢？更重要的是，咱們如何才能組合多個 action，以處理更加複雜的異步流程？
   首先，你須要明白 store.dispatch 能夠處理被觸發的 action 的處理函數返回的 Promise，而且 store.dispatch 仍舊返回 Promise：
   定義action以下：

mutations: {
        reduce(state) {
            state.count--;
        }
    },
    actions: {
        actionA({ commit }) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('reduce')
                    resolve()
                }, 1000)
            })
        }
    }
複製代碼

組件中代碼以下：

methods: {
            decrement() {
                this.$store.dispatch('actionA').then(() => {
                   console.log("先減1再加1")
                   this.incrementAsync()
                })
            },
            incrementAsync() {
                this.$store.dispatch("incrementAsync")
            }
        }
複製代碼

module模塊組

因爲使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象。當應用變得很是複雜時，store 對象就有可能變得至關臃腫。

爲了解決以上問題，Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
複製代碼

命名空間

默認狀況下，模塊內部的 action、mutation 和 getter 是註冊在全局命名空間的——這樣使得多個模塊可以對同一 mutation 或 action 做出響應。

若是但願你的模塊具備更高的封裝度和複用性，你能夠經過添加 namespaced: true 的方式使其成爲帶命名空間的模塊。當模塊被註冊後，它的全部 getter、action 及 mutation 都會自動根據模塊註冊的路徑調整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模塊內容（module assets）
      state: { ... }, // 模塊內的狀態已是嵌套的了，使用 `namespaced` 屬性不會對其產生影響
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模塊
      modules: {
        // 繼承父模塊的命名空間
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 進一步嵌套命名空間
        posts: {
          namespaced: true,

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})
複製代碼

上例中myPage和posts均是account的子module，可是myPage沒有設置命名空間，因此myPage繼承了account的命名空間。posts設置命名空間，因此在訪問posts內部的getters時，須要添加全路徑。

實際運行代碼以下：

const moduleA = {
    namespaced: true,
    state: { count: 10 },
    mutations: {
        increment(state) {
            // 這裏的 `state` 對象是模塊的局部狀態
            state.count++
        }
    },

    getters: {
        doubleCount(state) {
            return state.count * 2
        }
    },
    actions: {
        incrementIfOddOnRootSum({ state, commit, rootState }) {
            if ((state.count + rootState.count) % 2 === 1) {
                commit('increment')
            }
        }
    },
    getters: {
        sumWithRootCount(state, getters, rootState) {
            return state.count + rootState.count
        }
    }
}


---在父節點中添加module定義
    modules: {
        a: moduleA
    }

複製代碼

在vue中訪問定義的module

<button @click="$store.commit('a/increment')">double</button>
  <button @click="doubleCount">doubleCount</button>
  
複製代碼

methods方法定義:

count() {
      return this.$store.state.a.count
    },
     doubleCount() {
      return this.$store.commit('a/increment')
    }
複製代碼

參考連接

vuex官方文檔

技術胖老師博客