Vuex中State的使用方法
前言
Vuex 使用單一狀態(tài)樹，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。
這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。
單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。
一、在 Vue 組件中使用 Vuex
Vuex 通過 store 選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件“注入”到每一個(gè)子組件中（需調(diào)用 Vue.use(Vuex)）：
// 根組件
const app = new Vue({
el: '#app',
// 把 store 對(duì)象提供給 “store” 選項(xiàng)，
// 這可以把 store 的實(shí)例注入所有的子組件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
通過在根實(shí)例中注冊(cè) store 選項(xiàng)，該 store 實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。讓我們更新下 Counter 的實(shí)現(xiàn)：
// 子組件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
二、mapState 輔助函數(shù) 使用Vuex
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性。
// 在單獨(dú)構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from 'vuex'
export default {
data() {
return {
localCount: 1
}
},
computed: mapState({
// 箭頭函數(shù)可使代碼更簡(jiǎn)練
count: state => state.count,
// 傳字符串參數(shù) 'count' 等同于 `state => state.count`
countAlias: 'count',
// 若想使用組件內(nèi) data 中定義的局部變量，必須使用常規(guī)函數(shù)
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。
// 映射 this.count 為 store.state.count // 使用時(shí)，按照計(jì)算屬性使用即可 this.count computed: mapState(['count'])
三、對(duì)象展開運(yùn)算符
mapState 函數(shù)返回的是一個(gè)對(duì)象。我們?nèi)绾螌⑺c局部計(jì)算屬性混合使用呢？通常，我們需要使用一個(gè)工具函數(shù)將多個(gè)對(duì)象合并為一個(gè)，以使我們可以將最終對(duì)象傳給 computed 屬性。但是自從有了 對(duì)象展開運(yùn)算符 ，我們可以極大地簡(jiǎn)化寫法：
// 使用按照計(jì)算屬性用法 直接 this.count ,this.num
// 插值表達(dá)式 {{ count }}, {{ num }}
computed: {
...mapState(['count', 'num'])
}
到此這篇關(guān)于Vuex中State的使用方法的文章就介紹到這了,更多相關(guān)Vuex中State內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了解決vue中el-tab-pane切換的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
頭像上傳在很多實(shí)例中都可以用到，本文主要介紹了Element 頭像上傳，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
深入詳解Vue3實(shí)現(xiàn)多環(huán)境配置與切換方式
這篇文章主要為大家詳細(xì)介紹了Vue3中實(shí)現(xiàn)多環(huán)境配置與切換方式的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-09-09
class 與 style 綁定就是專門用來實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù),如果需要?jiǎng)討B(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
前端vue2中直接拉起vnc客戶端實(shí)現(xiàn)方式
本文介紹Vue項(xiàng)目中協(xié)議檢測(cè)工具類與組件的實(shí)現(xiàn),通過封裝檢測(cè)邏輯提升復(fù)用性,并展示如何在組件中應(yīng)用工具類進(jìn)行協(xié)議校驗(yàn)與數(shù)據(jù)展示2025-08-08
在項(xiàng)目中會(huì)發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象，當(dāng)我們?cè)谑褂胑lement-plus中的圖標(biāo)組件時(shí)會(huì)出現(xiàn)內(nèi)存泄漏，所以本文講給大家講講如何解決vue3中的內(nèi)存泄漏的問題,需要的朋友可以參考下2023-07-07
Vue修改iview組件的樣式的兩種方案(element同)
使用vue必然會(huì)用到等iview組件庫(kù),但是iview的組件的樣式跟自己寫的div的樣式修改不太一樣,所以本文給大家介紹了Vue修改iview組件的樣式的兩種方案(element同),需要的朋友可以參考下2024-04-04
本文主要介紹了Element-UI 10個(gè)技巧小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要給大家介紹了關(guān)于vue操作dom元素的3種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了Vue渲染失敗的幾種原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06