Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
Vuex使用單一狀態(tài)樹(shù)（一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)），它作為唯一數(shù)據(jù)源存在，每個(gè)應(yīng)用僅僅有一個(gè)store實(shí)例。
單一狀態(tài)樹(shù)使得我們能夠直接定位任一特定的狀態(tài)片段，在調(diào)試過(guò)程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。
在Vue組件中獲得Vuex狀態(tài)
Vuex的狀態(tài)存儲(chǔ)是相應(yīng)式的。在Vue組件中獲取Vuex狀態(tài)總共有 五種 可行的方法。
1.從store實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)：（需要導(dǎo)入store組件）
const Counter={
template:`<div>{{ count }}</div>`,
computed:{
count(){
return store.state.count//返回store實(shí)例的count狀態(tài)
}
}
}
每當(dāng)store.state.count發(fā)生變化，都會(huì)重新求取計(jì)算屬性，并且出發(fā)更新相關(guān)聯(lián)的DOM
缺點(diǎn)：這種模式導(dǎo)致組件依賴全局狀態(tài)單例。在每個(gè)需要state的組件中需要頻繁地導(dǎo)入，并且在測(cè)試組件時(shí)需要模擬狀態(tài)。
Vuex通過(guò)store選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件注入到每一個(gè)子組件中，前提是要調(diào)用Vue.use(Vuex)
const app=new Vue({
el:'#app',
store,//根組件通過(guò)store選項(xiàng)將store實(shí)例注入所有地子組件
components:{ Counter },
template:`
<div class="app">
<Counter><Counter>
</div>
`
})
上面的代碼能夠讓子組件通過(guò)this.$store訪問(wèn)到store實(shí)例。
2.于是，Counter組件可以按照下面的實(shí)現(xiàn)來(lái)訪問(wèn)store，而不用頻繁導(dǎo)入state的組件。
const Counter={
template:`<div>{{ counter }}</div>`,
computed:{
count(){
return this.$state.count
}
}
}
mapState輔助函數(shù)（用于獲取多個(gè)state狀態(tài)）
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余（如上面代碼的count函數(shù)），避免這個(gè)問(wèn)題，
3.我們可以用mapState輔助函數(shù)幫助我們生成計(jì)算屬性，讓我們少敲幾個(gè)?。?/strong>
import { mapState } from 'vuex'
export default{
computed:mapState({
//方式一：箭頭函數(shù)
count:state => state.count,
//方式二：傳字符串參數(shù)
countAlias:'count',
//如果要使用this獲取局部狀態(tài)，就要使用常規(guī)函數(shù)了！
countPlusLocalState(state){
return state.count+this.localCount
}
})
}
4.如果映射的計(jì)算屬性的名稱與state的子節(jié)點(diǎn)相同時(shí)，我們給mapState傳一個(gè)字符串?dāng)?shù)組。
computed:mapState([ 'count' ])
5.對(duì)象展開(kāi)運(yùn)算符
上面的3、4都是mapState單獨(dú)使用在computed屬性中，但是如果要和普通的局部計(jì)算屬性混合使用的時(shí)候，我們用對(duì)象展開(kāi)運(yùn)算符(…)
import { mapState,mapGetter } from 'vuex'
export default{
methods:{
increment(){
this.$store.commit('increment');
}
},
computed:{
elsecomputed(){},//這是普通的局部計(jì)算屬性
...mapGetters([
'count'
]),
...mapState({
counts(){
return this.$store.state.count;
}
}
})
}
}
并不需要把所有狀態(tài)都放到Vuex,有些狀態(tài)嚴(yán)格屬于單個(gè)組件，最好是作為組件的局部狀態(tài)，要根據(jù)應(yīng)用開(kāi)發(fā)進(jìn)行權(quán)衡和確定。
以上這篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-router 路由傳參用法,結(jié)合實(shí)例形式分析了vue-router 路由傳參基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
vuex項(xiàng)目中登錄狀態(tài)管理的實(shí)踐過(guò)程
由于狀態(tài)零散地分布在許多組件和組件之間的交互中,大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長(zhǎng),為了解決這個(gè)問(wèn)題,Vue 提供 vuex,這篇文章主要給大家介紹了關(guān)于vuex項(xiàng)目中登錄狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-09-09
vuex存儲(chǔ)數(shù)據(jù)的幾種方法實(shí)例詳解
在瀏覽網(wǎng)頁(yè)時(shí)我們有些時(shí)候需要記住一些用戶選擇的信息,比如登陸時(shí)我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁(yè)時(shí)就會(huì)有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲(chǔ)數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
vue 監(jiān)聽(tīng)窗口變化對(duì)頁(yè)面部分元素重新渲染操作
這篇文章主要介紹了vue 監(jiān)聽(tīng)窗口變化對(duì)頁(yè)面部分元素重新渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue 實(shí)現(xiàn)穿梭框功能的詳細(xì)代碼
本文給大家介紹Vue 實(shí)現(xiàn)穿梭框功能，代碼分為css，html和js代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-10-10
這篇文章主要介紹了vue項(xiàng)目中axios配置方式(代理配置),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)
這篇文章主要介紹了elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于VUE前端刪除和批量刪除的相關(guān)資料, 在實(shí)際的開(kāi)發(fā)中,我們可以使用Vue.js來(lái)快速實(shí)現(xiàn)批量刪除功能,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07
Vuex利用state保存新聞數(shù)據(jù)實(shí)例
本篇文章主要介紹了Vuex利用state保存新聞數(shù)據(jù)實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06