Vue學習之狀態管理機制Vuex

2021-09-26 18:15:42 字數 1581 閱讀 3392

3、使用:

var store = new vuex.store(, //儲存資料

mutations: }, //突變,用於修改state的值

actions: } //動作,用於呼叫突變執行資料的改變

});new vue(

//方法2:陣列中的引數要與state中的值保持一致

…vuex.mapstate([『count』])

//方法3:

...vuex.mapstate()

}, methods:

//方法2:

...vuex.mapactions(['count']);

}});

4、getter: store 的計算屬性。例:對store裡的資料進行加工之後再進行訪問。

(1)方法1----getters: getter 的返回值會根據它的依賴被快取起來,且只有當它的依賴值發生了改變才會被重新計算。

const store = new vuex.store(,  ] 

}, getters:

}});

store.getters.donetodos

(2)方法2----mapgetters 輔助函式:僅僅是將 store 中的 getter 對映到區域性計算屬性。

// 方法1:使用物件展開運算子將 getter 混入 computed 物件中

computed:

//方法2:如果你想將乙個 getter 屬性另取乙個名字,使用物件形式

computed:,

...vuex.mapgetters()

}

5、mutation:更改 vuex 的 store 中的狀態,必須是同步操作。不可以包含非同步操作。

mutations: 

}store.commit('increment')

(1)mapmutations: 將元件中的 methods 對映為 store.commit 呼叫

mutations: 

} methods:)

}

6、action:可以非同步操作。例如,與後台互動資料

action 類似於 mutation ,不同在於, action 提交的是 mutation ,而不是直接變更狀 態,並且 action 可以包含任意非同步操作, action 函式接受乙個與 store 例項具有相同 方法和屬性的 context 物件,因此你可以呼叫 context.commit 提交乙個 mutation ,或 者通過 context.state 和 context.getters 來獲取 state 和 getters 。

(1)普通用法:

actions: 

}store.dispatch('increment',)

(2)mapactions:將元件的 methods 對映為 store.dispatch 呼叫

actions: 

} methods:)

}

HTTP狀態管理機制之Cookie

cookie 最早是網景公司的雇員 lou montulli 在1993年3月發明,後被 w3c 採納,目前 cookie 已經成為標準,所有的主流瀏覽器如 ie chrome firefox opera 等都支援。cookie 的誕生是由於 http 協議的天生缺陷,http 是一種無狀態的協議,...

Vue狀態管理

一 vuex是什麼 二 使用 單向資料流 state const state 使用 this store.state.uid this store.state.nickname getters const getters mutations 不推薦使用 mutations const mutatio...

vue基礎之狀態管理vuex

vuex實現狀態管理 背景 vue狀態管理 如何引入vuex 1.新建index.js檔案,用來直接引用vuex import vue from vue import vuex from vuex 直接使用vuex vue.use vuex 建立vuex例項 const store new vuex...