Vuex中State的使用方法
前言
Vuex 使用單一狀態(tài)樹，用一個對象就包含了全部的應(yīng)用層級狀態(tài)。
這也意味著，每個應(yīng)用將僅僅包含一個 store 實例。
單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個當(dāng)前應(yīng)用狀態(tài)的快照。
一、在 Vue 組件中使用 Vuex
Vuex 通過 store 選項，提供了一種機(jī)制將狀態(tài)從根組件“注入”到每一個子組件中（需調(diào)用 Vue.use(Vuex)）：
// 根組件
const app = new Vue({
el: '#app',
// 把 store 對象提供給 “store” 選項，
// 這可以把 store 的實例注入所有的子組件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
通過在根實例中注冊 store 選項，該 store 實例會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。讓我們更新下 Counter 的實現(xiàn)：
// 子組件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
二、mapState 輔助函數(shù) 使用Vuex
當(dāng)一個組件需要獲取多個狀態(tài)的時候，將這些狀態(tài)都聲明為計算屬性會有些重復(fù)和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性。
// 在單獨構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from 'vuex'
export default {
data() {
return {
localCount: 1
}
},
computed: mapState({
// 箭頭函數(shù)可使代碼更簡練
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)映射的計算屬性的名稱與 state 的子節(jié)點名稱相同時，我們也可以給 mapState 傳一個字符串?dāng)?shù)組。
// 映射 this.count 為 store.state.count // 使用時，按照計算屬性使用即可 this.count computed: mapState(['count'])
三、對象展開運算符
mapState 函數(shù)返回的是一個對象。我們?nèi)绾螌⑺c局部計算屬性混合使用呢？通常，我們需要使用一個工具函數(shù)將多個對象合并為一個，以使我們可以將最終對象傳給 computed 屬性。但是自從有了 對象展開運算符 ，我們可以極大地簡化寫法：
// 使用按照計算屬性用法 直接 this.count ,this.num
// 插值表達(dá)式 {{ count }}, {{ num }}
computed: {
...mapState(['count', 'num'])
}
到此這篇關(guān)于Vuex中State的使用方法的文章就介紹到這了,更多相關(guān)Vuex中State內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中安裝使用cesium方式(親測可用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡單實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
數(shù)獨是源自18世紀(jì)瑞士的一種數(shù)學(xué)游戲，是一種運用紙、筆進(jìn)行演算的邏輯游戲。下面這篇文章主要給大家介紹了關(guān)于利用vue開發(fā)一個所謂的數(shù)獨的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
下面小編就為大家分享一篇基于vue-resource jsonp跨域問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
最近在做uni-app的時候需要用到vant組件，在網(wǎng)上看到了很多的使用vant組件的方法，但是講解的大多繁瑣，或者無法使用，現(xiàn)把最新，最實用的vant組件的使用方法分享給大家,需要的朋友可以參考下2023-02-02
vue實現(xiàn)一個矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實現(xiàn)一個矩形標(biāo)記區(qū)域 rectangle marker的方法，幫助大家實現(xiàn)區(qū)域標(biāo)記功能，感興趣的朋友可以了解下2020-10-10
隨著 Vue 3 的發(fā)布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再適用或有所變化,為了應(yīng)對這種變化,我們可以選擇在 Vue 3 應(yīng)用中實現(xiàn)自定義的“事件總線”機(jī)制,所以本文給大家介紹了Vue3中如何自定義消息總線,需要的朋友可以參考下2024-05-05
這篇文章主要為大家介紹了vue的父子組件傳值，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue如何讀取外部配置文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了vue項目展示pdf文件的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07