Vuex中狀態(tài)管理器的使用詳解
一、Vuex是什么？
Vuex在Vue項目開發(fā)時使用的狀態(tài)管理工具。簡單來說，就是對Vue的應(yīng)用中多個組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫）
Vuex實現(xiàn)了一個單向數(shù)據(jù)流，在全局擁有一個State存放數(shù)據(jù)，當(dāng)組件要更改State中的數(shù)據(jù)時，必須通過Mutation進(jìn)行，Mutation同時提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新。
而當(dāng)所有異步操作(常見于調(diào)用后端接口異步獲取更新數(shù)據(jù))或批量的同步操作需要走Action，但Action也是無法直接修改State的，還是需要通過Mutation來修改State的數(shù)據(jù)。最后，根據(jù)State的變化，渲染到視圖上。
二、什么時候使用Vuex
不適用場景：小型簡單應(yīng)用，用 Vuex 是繁瑣冗余的，更適合使用簡單的store模式
適用場景：構(gòu)建一個中大型單頁應(yīng)用，可能會考慮如何更好地在組件外部管理狀態(tài)，即多個組件共享狀態(tài)：
多個視圖依賴于同一狀態(tài)：此時傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。
來自不同視圖的行為需要變更同一狀態(tài)：此時采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝，通常會導(dǎo)致無法維護(hù)的代碼
在這些情況下就適合用Vuex進(jìn)行全局單例模式管理
三、Vuex的核心概念和API
流程：View -> Actions -> Mutations -> State -> View
1、state
1) vuex 管理的狀態(tài)對象
2) 它應(yīng)該是唯一的
const state = {
xxx: initValue
}2、 mutations
1) 包含多個直接更新 state 的方法(回調(diào)函數(shù))的對象
2) 誰來觸發(fā): action 中的 commit('mutation 名稱')或者在組件中通過this.$store.commit(‘xxx’,params)使用。這個和組件中的自定義事件類似
3) 只能包含同步的代碼, 不能寫異步代碼
const mutations = {
xxx(state, {data1}) {
// 更新 state 的某個屬性
}
}3、 actions
1) 提交 mutation，異步操作。包含多個事件回調(diào)函數(shù)的
2) 通過執(zhí)行: commit()來觸發(fā) mutation 的調(diào)用, 間接更新 state
3) 誰來觸發(fā): 組件中通過this.$store.dispatch('action 名稱', data1)
4) 可以包含異步代碼(axios)
const actions ={
zzz ({commit, state}, data1){
commit('xxx', {data1})
}
}4、 getters
1) 對數(shù)據(jù)獲取之前的再次編譯，可以理解為state的計算屬性
2) 誰來讀取: 組件中: this.$store.getters.xxx
const getters ={
xxx(state) {
return ...
}
}5、 modules
1) 包含多個 module:store的子模塊，為了開發(fā)大型項目，方便狀態(tài)管理而使用的，即將store分割為模塊，使store對象不會太臃腫。
2)一個 module 是一個 store 的配置對象
3) 與一個組件(包含有共享數(shù)據(jù))對應(yīng)
四、應(yīng)用舉例
1、安裝：npm i vuex -S
2、創(chuàng)建store：src/store/index.js
import { createStore} from "vuex";
export default createStore({
//vuex中的數(shù)據(jù)源,我們需要保存的數(shù)據(jù)就保存在這里，可以在組件通過 this.$store.state來獲取我們定義的數(shù)據(jù)；
state: {
count: 0,
age: 0
},
/*
(1)Getter相當(dāng)于vue中的computed計算屬性，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計算
(2)通過屬性訪問Getter會暴露為 store.getters 對象，可以以屬性的形式訪問這些值：this.$store.getters.xxx
(3)Getters 可以用于監(jiān)聽state中的值的變化，返回計算后的結(jié)果
*/
getters: {
getterAge(state){
return state.age =25
}
},
/*
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation，并且Mutation 必須是同步函數(shù)
在sotre.js中定義mutations對象，該對象中有兩個方法，mutations里面的參數(shù)，第一個默認(rèn)為state，
其中第二個參數(shù)obj在官方文檔就是載荷（payload），可以傳入?yún)?shù)及對象。
在大多數(shù)情況下，載荷應(yīng)該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀
*/
mutations: {
addCount(state,obj){
return state.count += obj.num
},
subCount(state,obj){
return state.count -= obj.num
}
},
actions: {
addCountAsyn(context){
setTimeout(()=>{
context.commit('addCount',{
num: 1
})
},3000)
},
subCountAsyn(context){
setTimeout(()=> {
context.commit('subCount',{
num: 1
})
},2000)
}
}
})3、在main.js文件中使用store
4、創(chuàng)建Home.vue組件
<template>
<div>
<h2>通過getter獲得計算后的年齡：{{ getterAge }}</h2>
<p>Count：{{ count }}</p>
<button @click="handlerAdd()">加1</button>
<button @click="handlerSub()">減1</button>
<button @click="handlerAddAnys()">異步增加(2s后執(zhí)行)</button>
<button @click="handlerSubAnys()">異步減少(2s后執(zhí)行)</button>
</div>
</template>
<script>
export default {
name: "Home",
computed: {
count(){
return this.$store.state.count
},
getterAge(){
return this.$store.getters.getterAge
}
},
methods: {
handlerAdd(){
this.$store.commit("addCount",{
num: 1
})
},
handlerSub(){
this.$store.commit("subCount",{
num: 1
})
},
handlerAddAnys(){
this.$store.dispatch('addCountAsyn')
},
handlerSubAnys(){
this.$store.dispatch('subCountAsyn')
}
}
}
</script>6、在App.vue中導(dǎo)入Home.vue
7、運行效果：
五、vuex中各種輔助函數(shù)的用法，可以使我們更加方便的運用vuex
1、…mapState
count(){
return this.$store.state.count
},等價于
...mapState([ 'count' ]),
2、…mapGetters
getterAge(){
return this.$store.getters.getterAge
}等價于
...mapGetters(['getterAge'])
3、…mapMutations：使用輔助函數(shù)后載荷的傳參，直接在調(diào)用的地方進(jìn)行傳參便可
handlerAdd(){
this.$store.commit("addCount",{
num: 1
})
},
handlerSub(){
this.$store.commit("subCount",{
num: 1
})
},等價于
...mapMutations({
handlerAdd: 'addCount',
handlerSub: 'subCount'
})4、…mapActions
handlerAddAnys(){
this.$store.dispatch('addCountAsyn')
},
handlerSubAnys(){
this.$store.dispatch('subCountAsyn')
}等價于
...mapActions({
handlerAddAnys: 'addCountAsyn',
handlerSubAnys: 'subCountAsyn'
})修改上例中的Home.vue組件
到此這篇關(guān)于Vuex---狀態(tài)管理器的使用的文章就介紹到這了,更多相關(guān)Vuex狀態(tài)管理器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue-router中的query動態(tài)傳參問題
下面小編就為大家分享一篇解決vue-router中的query動態(tài)傳參問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue?項目中選擇?TSX?而非傳統(tǒng)?.vue?文件的原因分析
文章探討了Vue項目中使用TSX（TypeScript?JSX）的背景、優(yōu)勢和局限性,TSX結(jié)合了TypeScript和JSX,增強(qiáng)了類型安全和代碼組織性,但也增加了學(xué)習(xí)曲線和可讀性問題,對于復(fù)雜應(yīng)用,TSX提供了更大的靈活性和類型支持,逐漸成為一些開發(fā)者的選擇2024-11-11
這篇文章主要介紹了在Vue項目中使用Typescript的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue為了增加列表渲染的功能，增加了一組觀察數(shù)組的方法，而且可以顯示一個數(shù)組的過濾或排序的副本。本文將詳細(xì)介紹Vue數(shù)組更新及過濾排序2017-08-08
在一些特殊的應(yīng)用場景中,可能需要在網(wǎng)頁上添加水印以保護(hù)版權(quán)或標(biāo)識信息,本文將介紹如何在Vue項目中添加滿屏水印并實現(xiàn)去除水印的功能,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))
這篇文章主要介紹了詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue3 銷毀組件方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
在Vue中使用Bootstrap是常見的前端開發(fā)實踐之一,結(jié)合了Vue的響應(yīng)式數(shù)據(jù)綁定與Bootstrap的UI組件和布局系統(tǒng),能夠快速實現(xiàn)現(xiàn)代化的網(wǎng)頁應(yīng)用,本文將詳細(xì)介紹如何在Vue中使用Bootstrap,從安裝到高級使用,涵蓋了各種常見的開發(fā)場景和技巧,需要的朋友可以參考下2024-12-12
axios+Vue實現(xiàn)上傳文件顯示進(jìn)度功能
這篇文章主要介紹了axios+Vue上傳文件顯示進(jìn)度效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04