Vuex中State的使用方法
前言
Vuex 使用單一狀態(tài)樹(shù)，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。
這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。
單一狀態(tài)樹(shù)讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過(guò)程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。
一、在 Vue 組件中使用 Vuex
Vuex 通過(guò) 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>
`
})
通過(guò)在根實(shí)例中注冊(cè) store 選項(xiàng)，該 store 實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過(guò) this.$store 訪問(wèn)到。讓我們更新下 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è)問(wèn)題，我們可以使用 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ì)象展開(kāi)運(yùn)算符
mapState 函數(shù)返回的是一個(gè)對(duì)象。我們?nèi)绾螌⑺c局部計(jì)算屬性混合使用呢？通常，我們需要使用一個(gè)工具函數(shù)將多個(gè)對(duì)象合并為一個(gè)，以使我們可以將最終對(duì)象傳給 computed 屬性。但是自從有了 對(duì)象展開(kāi)運(yùn)算符 ，我們可以極大地簡(jiǎn)化寫(xiě)法：
// 使用按照計(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中安裝使用cesium方式(親測(cè)可用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
利用vue開(kāi)發(fā)一個(gè)所謂的數(shù)獨(dú)方法實(shí)例
數(shù)獨(dú)是源自18世紀(jì)瑞士的一種數(shù)學(xué)游戲，是一種運(yùn)用紙、筆進(jìn)行演算的邏輯游戲。下面這篇文章主要給大家介紹了關(guān)于利用vue開(kāi)發(fā)一個(gè)所謂的數(shù)獨(dú)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
基于vue-resource jsonp跨域問(wèn)題的解決方法
下面小編就為大家分享一篇基于vue-resource jsonp跨域問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
最近在做uni-app的時(shí)候需要用到vant組件，在網(wǎng)上看到了很多的使用vant組件的方法，但是講解的大多繁瑣，或者無(wú)法使用，現(xiàn)把最新，最實(shí)用的vant組件的使用方法分享給大家,需要的朋友可以參考下2023-02-02
vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域 rectangle marker的方法，幫助大家實(shí)現(xiàn)區(qū)域標(biāo)記功能，感興趣的朋友可以了解下2020-10-10
隨著 Vue 3 的發(fā)布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再適用或有所變化,為了應(yīng)對(duì)這種變化,我們可以選擇在 Vue 3 應(yīng)用中實(shí)現(xiàn)自定義的“事件總線”機(jī)制,所以本文給大家介紹了Vue3中如何自定義消息總線,需要的朋友可以參考下2024-05-05
這篇文章主要為大家介紹了vue的父子組件傳值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了vue如何讀取外部配置文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07