vuex

vuex 狀態管理


  1. 簡介:

    1. Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那么相應的組件也會相應地得到高效更新。
    2. 不能直接改變 store 中的狀態:改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。而非直接修改 state,因為這可以更明確地追蹤到狀態的變化。
  2. state:
    1. 狀態管理,定義狀態管理屬性。強烈建議不要直接修改 state 的屬性,這會導致難以監管,從面相對象來說,這破壞了封裝性
    2. Vuex.Store 本質是實現的一個單例,web 的門檻低可能這是一個原因,監管一個簡單的對象變更很繁瑣,雖然有對象,卻沒有面向對象的思想(setter/getter)

  3. mutation:
    1. Vuex 中的 mutation 非常類似于事件:每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler);mutation 一個重要的原則就是 mutation 必須是同步函數。
    2. 可以向 store.commit 傳入額外的參數,即 mutation 的 載荷(payload)。在大多數情況下,載荷應該是一個對象,這樣可以包含多個字段并且記錄的 mutation 會更易讀。
    3. 對象風格提交:將 mutation 的名稱包裹在對象的 type 屬性上,此時,整個對象都作為載荷傳給 mutation 函數,因此 handler 保持不變:實現沒有改變,調用方式改變。

  4. action:
    1. Action 提交的是 mutation,而不是直接變更狀態。Action 可以包含任意異步操作,批量處理 mutation,還可以返回一個 promise,Action 通過 store.dispatch 方法觸發
    2. 因為 mutation 都是同步事務, 更建議使用異步的 actions 來處理 commit 操作,對 mutation 進行封裝。和 mutation 一樣,Actions 支持同樣的載荷方式和對象方式進行分發

  5. getters:
    1. 對 state 的 computed,從 store 中的 state 中派生出一些狀態,如 computed,getter 的返回值會根據它的依賴被緩存起來。Getter 也可以接受其他 getter 作為第二個參數。
    2. 也可以通過讓 getter 返回一個函數,來實現給 getter 傳參。這對 store 里的數組進行查詢時非常有用。注意,getter 在通過方法訪問時,每次都會去進行調用,而不會緩存結果。

  6. map 映射:
    1. 將 store 內定義的 state,getters,actions,映射到當前組件下,需要從 vuex 導入 mapState,mapGetters,mapActions。導入對象可為字典或集合:字典可重命名屬性名稱。
    2. 這將不再需要頻繁的訪問 store,將 mutation 封裝在 actions 內,也不需要直接 commit 觸發 mutation,通過 mapActions 也不需要顯式地調用 dispatch 分發,就像調用方法。 3. mapState:使用 Vuex 并不意味著你需要將所有的狀態放入 Vuex。屬于單個組件的狀態,最好還是作為組件的局部狀態。...mapState 將 store 內的狀態映射到當前組件。 4. mapGetters:Vuex 允許在 store 中定義“getter”(可以認為是 store 的計算屬性)。...mapGetters 建議映射在 computed 內:正常是通過store.getters 進行 getter 訪問。
    5. mapAction:通過 ...mapActions 在 methods 內映射 store 的 actions,映射完成可直接進行調用,避開了顯式地訪問 $store 來調用 commit 或 dispatch,更建議使用 actions。

  7. 配置:
    1. 依賴:npm install vuex --save
    2. 集中在 store 內配置好,導出 store 對象,和路由處理類似,這樣在 main.js 內注入時直接導入即可
    3. import 導入模塊,如路由,組件,狀態。若文件夾子下存在 index 文件,默認會識別并導入,且在導入文件的時候,編譯會主動識別文件類型,即導入還可省略文件后綴。

  8. strict
    1. 在嚴格模式下,無論何時發生了狀態變更且不是由 mutation 函數引起的,將會拋出錯誤。這能保證所有的狀態變更都能被調試工具跟蹤到。
    2. 注意:不要在發布環境下啟用嚴格模式!嚴格模式會深度監測狀態樹來檢測不合規的狀態變更——請確保在發布環境下關閉嚴格模式,以避免性能損失。
    3. 當在嚴格模式中使用 Vuex 時,在屬于 Vuex 的 state 上使用 v-model 會比較棘手:處理起來較為繁瑣:建議可不使用 strict,使用注意需要直接修改 state 就行。

在使用markdown書寫博客時,有可能會出現文本中的字符是markdown語法,那么markdown翻譯器就會誤將這些符號也翻譯成某種功能,就會出現顯示錯誤的情況。此時需要使用反斜杠('')來將這些字符進行轉義。如文中的 $


sample

export default new Vuex.Store({
    strict: process.env.NODE_ENV == "production" ? false : true,
    state: {
        count: 0,
        payload: 'Payload',

    },
    mutations: {
        increment(state) {
            state.count++;
            console.log(state.count);
        },
        decrement(state) {
            state.count--;
            console.log(state.count);
        },
        commit_payload(state, obj) {
            state.payload = obj.payload;
        }
    },
    actions: {
        action_increment(context) {
            context.commit('increment');
        },
        // 參數解構
        action_decrement({
            commit
        }) {
            commit('increment');
        },
        action_payload({
            commit
        }, obj) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('commit_payload', obj)
                    resolve()
                }, 1000)
            })
        }
    },
    getters: {
        count_info(state) {
            return `count plus ${state.count + 1}`
        }
    }
})
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 目錄 組件化 組件通信 狀態管理 Vuex 是什么 Vuex 有什么特點 Vuex 解決了什么問題 什么類型的數據...
    前端小華子閱讀 2,008評論 0 16
  • Vuex 概念篇 Vuex 是什么? Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式...
    Junting閱讀 3,094評論 0 43
  • Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,并以相應...
    白水螺絲閱讀 4,684評論 7 61
  • Vuex是什么? Vuex 是一個專為 Vue.js應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件...
    蕭玄辭閱讀 3,138評論 0 6
  • 1.給下周課堂討論的熱點24個問題準備好答案 ,參考鏈接 1. 貨從哪里來?為什么這么便宜,質量也還行? 一間名創...
    51b52d18d228閱讀 124評論 0 0