vue使用Vuex狀態(tài)管理模式
1、基于單向數(shù)據(jù)流問題而產(chǎn)生了Vuex
單向數(shù)據(jù)流是vue 中父子組件的核心概念，props 是單向綁定的。當(dāng)父組件的屬性值發(fā)生變化的時(shí)候，會傳遞給子組件發(fā)生相應(yīng)的變化，從而形成一個(gè)單向下行的綁定，父組件的屬性改變會流向下行子組件中，但是反之，為了防止子組件無意間修改了父組件中的數(shù)據(jù)而影響到了其他的子組件的狀態(tài)，vue 規(guī)定了從下往上的數(shù)據(jù)流是不允許的。當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡潔性很容易被破壞：
a、多個(gè)組件依賴于同一狀態(tài)。組件之間傳參變得特別繁瑣，并且兄弟組件之間狀態(tài)傳遞無能為力。
b、來自不同視圖的行為需要變更同一狀態(tài)。 經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。
我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來，以一個(gè)全局單例模式管理呢？Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
使用 Vuex 并不意味著你需要將所有的狀態(tài)放入 Vuex。雖然將所有的狀態(tài)放到 Vuex 會使?fàn)顟B(tài)變化更顯式和易調(diào)試，但也會使代碼變得冗長和不直觀。如果有些狀態(tài)嚴(yán)格屬于單個(gè)組件，最好還是作為組件的局部狀態(tài)。應(yīng)該根據(jù)你的應(yīng)用開發(fā)需要進(jìn)行權(quán)衡和確定。
2、安裝及使用
CDN 方式： <script src="...vuex.js"></script>
NPM 方式： npm install vuex --save
Yarn方式： yarn add vuex
其他方式：項(xiàng)目初始化是引入依賴
無論哪種方式都需要 Vue.use(Vuex)來安裝 Vuex3、核心及使用方法
每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）。“store”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) vuex的Vuex 核心 State 、Getters 、Mutation、Action、Module。
（1）State
Vuex也使用了單一狀態(tài)樹來管理應(yīng)用層級的全部狀態(tài)。唯一數(shù)據(jù)源。
單一狀態(tài)樹能夠讓我們最直接的方式找到某個(gè)狀態(tài)的片段，而且在之后的維護(hù)和調(diào)試過程中，也可以非常方便的管理和維護(hù)。
state存儲狀態(tài)類似于組件中data，在組件中訪問狀態(tài)經(jīng)常有兩種方法：分別為
a、通過 this.$store.state.屬性 的方式來訪問狀態(tài)，通常寫在computed計(jì)算屬性中，當(dāng)然也可以直接通過插值表達(dá)式訪問；
b、借助mapState 輔助函數(shù)。
核心代碼如下：
<div id="app">
{{ mycount }}<br>
直接插值表達(dá)式訪問
{{ this.$store.state.count }}<br>
{{ myinfoAge }}<br>
</div>
<script>
import Vue from 'vue';
import Vuex from 'vuex';
import { mapState } from 'vuex'// 使用輔助函數(shù)一定記住引入
const store = new Vuex.Store({
// 存儲狀態(tài)數(shù)據(jù)
state: {
count: 0,
info:{
name:"xiaoming",
age:18
}
},
)
new Vue({
el: '#app',
store,
computed:{
// a、計(jì)算屬性方式
mycount(){
return this.$store.state.count
},
// b、利用輔助函數(shù)賦值給對應(yīng)變量，頁面可以直接使用該變量
...mapState({
myinfoAge: (state) => state.info.age,
}),
// 當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。下面的簡化寫法相當(dāng)于 info: (state) => state.info,
...mapState(["info"]),
}
})
</script>（2） Getters
store的一個(gè)計(jì)算屬性，類比組件的計(jì)算屬性,getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算,Getter 接受 state 作為其第一個(gè)參數(shù),在state中的數(shù)據(jù)發(fā)生改變，計(jì)算屬性重新計(jì)算
Getters 的狀態(tài)存儲相當(dāng)于組件中計(jì)算屬性，訪問方式有三種：
a、通過屬性訪問
b、通過方法訪問
c、通過mapGetters 輔助函數(shù)訪問
核心代碼如下：
<div id="app">
{{ myInfoLength }}<br>
直接插值表達(dá)式訪問
{{ this.$store.getters.infoLength }}<br>
{{ myName }}<br>
{{ infoLength }}
</div>
<script>
import Vue from 'vue';
import Vuex from 'vuex';
import { mapGetters } from 'vuex'// 使用輔助函數(shù)一定記住引入
const store = new Vuex.Store({
state: {
info:[
{name:"name1",age:18},
{name:"name2",age:28}
]
},
// 存儲狀態(tài)數(shù)據(jù)
getters: {
infoLength: (state) => {
return state.info.length;
},
getNameByAge: (state) => (age) => {
return state.info.find(item => item.age === age).name
}
},
)
new Vue({
el: '#app',
store,
computed:{
// a、通過屬性訪問
myInfoLength(){
return this.$store.getters.infoLength
}
// b、通過方法訪問
myName(){
return this.$store.getters.getNameByAge(18)
}
// c、mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性
...mapGetters(["infoLength"])
}
})
</script>（3） Mutation
前面state和getters兩個(gè)核心概念都是為了在store存儲數(shù)據(jù)和訪問數(shù)據(jù)的使用，Mutation則提供了對store中數(shù)據(jù)的修改功能，并且是唯一的更新方式，提交Mutation，Mutation主要包括兩部分：字符串的事件類型（type）和一個(gè)回調(diào)函數(shù)（handler）,該回調(diào)函數(shù)的第一個(gè)參數(shù)就是state。
在視圖組件中不能直接修改store容器中的狀態(tài)，需要先在容器中注冊一個(gè)事件函數(shù)，當(dāng)需要更新狀態(tài)時(shí)候需要提交觸發(fā)該事件，同時(shí)可以向該事件傳遞參數(shù)。這里需要區(qū)別與組件內(nèi)v-model雙向綁定。提交事件方法有一下幾種：
a、普通提交方式
b、對象風(fēng)格提交
c、借助 mapMutations 輔助函數(shù)
其核心代碼如下：
<div id="app">
<button @click="handleAdd">點(diǎn)我加一</button>
<button @click="handleAddForNum">點(diǎn)我加加</button>
<button @click="handleAddForObj">對象添加</button>
<button @click="handleAddMap">對象添加</button>
</div>
<script>
import Vue from 'vue';
import Vuex from 'vuex';
import { mapMutations } from 'vuex'// 使用輔助函數(shù)一定記住引入
const store = new Vuex.Store({
state: {
count:1
},
mutations：{
// 注冊事件
addCount(state){
state.count ++
},
addCountForNum(state,num){
state.count += num
},
addCountForObj(state,payload){
state.count += payload.num
},
addMap(state){
state.count ++
}
}
)
new Vue({
el: '#app',
store,
methods:{
// a、普通提交方式
handleAdd(){
this.$store.commit('addCount')
},
handleAddForNum(){
this.$store.commit('addCountForNum',10)
},
// b、對象風(fēng)格提交
handleAddForObj() {
this.$store.commit({ type: "addCountForObj", num: 100 });
},
// c、借助 mapMutations 輔助函數(shù)
...mapMutations(["addMap"]),
handleAddMap(){
this.addMap()
}
}
})
</script>Mutation 需遵守 Vue 的響應(yīng)規(guī)則，Vuex 的 store 中的狀態(tài)是響應(yīng)式的，那么當(dāng)我們變更狀態(tài)時(shí)，監(jiān)視狀態(tài)的 Vue 組件也會自動更新。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項(xiàng)：最好提前在你的 store 中初始化好所有所需屬性。當(dāng)需要在對象上添加新屬性時(shí)，你應(yīng)該使用 Vue.set(obj, 'newProp', 123), 或者以新對象替換老對象。例如，利用對象展開運(yùn)算符 state.obj = { ...state.obj, newProp: 123 }
注意：Mutation 必須是同步函數(shù)。在 mutation 中混合異步調(diào)用會導(dǎo)致你的程序很難調(diào)試。例如，當(dāng)你調(diào)用了兩個(gè)包含異步回調(diào)的 mutation 來改變狀態(tài)，你怎么知道什么時(shí)候回調(diào)和哪個(gè)先回調(diào)呢？
（4） Action
Action類似于Mutation, 但是是用來代替Mutation進(jìn)行異步操作的.action 用于異步的修改state，它是通過muation間接修改state的。
context是和store對象具有相同方法和屬性的對象.也就是說, 我們可以通過context去進(jìn)行commit相關(guān)的操作, 也可以獲取context.state等.
若需要異步操作來修改state中的狀態(tài)，首先需要action來注冊事件，組件視圖在通過dispatch分發(fā)方式調(diào)用該事件，該事件內(nèi)部提交mutation中的事件完成改變狀態(tài)操作，總之，通過action這個(gè)中介來提交mutation中的事件函數(shù).分發(fā)事件方法如下：
a、普通提交方式
b、對象風(fēng)格提交
c、借助 mapActions 輔助函數(shù)
核心代碼如下：
<div id="app">
<button @click="handleAdd">點(diǎn)我加一</button>
<button @click="handleAddTen">點(diǎn)我加十</button>
<button @click="handleAddForObj">對象添加</button>
<button @click="handleAddMap">對象添加</button>
</div>
<script>
import Vue from 'vue';
import Vuex from 'vuex';
import { mapMutations,mapActions } from 'vuex'// 使用輔助函數(shù)一定記住引入
const store = new Vuex.Store({
state: {
count:1
},
// 注冊事件修改state狀態(tài)值
mutations：{
addCount(state){
state.count ++
},
addCountForNum(state,num){
state.count += num
},
addCountForObj(state,payload){
state.count += payload.num
},
addMap(state){
state.count ++
}
},
// 注冊事件,提交給 mutation
actions：{
addAction(context){
setTimeout(() => {
context.commit('addCount')
}, 1000)
},
addActionForNum(context,num){
setTimeout(() => {
context.commit('addCountForNum',num)
}, 1000)
},
addActionForObj(context,payload){
setTimeout(() => {
context.commit('addCountForObj',payload)
}, 1000)
},
addActionMap(context){
setTimeout(() => {
context.commit('addMap')
}, 1000)
}
}
)
new Vue({
el: '#app',
store,
methods:{
// a、普通提交方式
handleAdd(){
this.$store.dispatch('addAction')
},
handleAddTen(){
this.$store.dispatch('addActionForNum',10)
},
// b、對象風(fēng)格提交
handleAddForObj(){
this.$store.dispatch({
type: 'addActionForObj',
amount: 10
})
}
// 借助 mapActions 輔助函數(shù)
...mapActions(["addActionMap"]),// 相當(dāng)于...mapActions({addActionMap："addActionMap"})
handleAddMap(){
this.addActionMap()
}
}
})組合 Action:組合多個(gè) action，以處理更加復(fù)雜的異步流程.store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise，并且 store.dispatch 仍舊返回 Promise。一個(gè) store.dispatch 在不同模塊中可以觸發(fā)多個(gè) action 函數(shù)。在這種情況下，只有當(dāng)所有觸發(fā)函數(shù)完成后，返回的 Promise 才會執(zhí)行。假設(shè) getData() 和 getOtherData() 返回的是 Promise。
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}（5）Modules
Vuex允許我們將store分割成模塊(Module), 而每個(gè)模塊擁有自己的state、mutation、action、getters等
4、Vuex和全局對象的不同
（1）Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。
（2）你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
到此這篇關(guān)于vue使用Vuex狀態(tài)管理模式的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在?Vue?3?中的?Composition?API?中,$refs?并不直接可用于?setup?函數(shù),但是實(shí)際工作中確實(shí)有需求,那么該如何解決呢,本文為大家整理了兩個(gè)方案,希望對大家有所幫助2023-08-08
監(jiān)聽器是Vue3中非常好用的一個(gè)特性,用于監(jiān)聽某個(gè)響應(yīng)式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫
這篇文章主要介紹了?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫，我們通過考慮其功能、工作原理以及如何開始使用它來了解?Vue?Demi，下面我們一起進(jìn)入文章學(xué)起來吧2022-02-02
這篇文章主要介紹了Vue作用域插槽slot-scope實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號的問題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號要怎么解決,項(xiàng)目場景我是傳遞一個(gè)string字符給后端時(shí)候報(bào)錯(cuò)，隨手把這個(gè)問題記錄下來了，需要的朋友可以參考下解決方案2022-11-11
解決element ui select下拉框不回顯數(shù)據(jù)問題的解決
這篇文章主要介紹了解決element ui select下拉框不回顯數(shù)據(jù)問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue + el-form 實(shí)現(xiàn)的多層循環(huán)表單驗(yàn)證
這篇文章主要介紹了vue + el-form 實(shí)現(xiàn)的多層循環(huán)表單驗(yàn)證，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下。2020-11-11
vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方
最近的項(xiàng)目需要用到vue/cli,但是用cnpm安裝vue/cli的時(shí)候報(bào)錯(cuò)了,下面這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方式,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07