Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
Vuex使用單一狀態(tài)樹（一個對象就包含了全部的應(yīng)用層級狀態(tài)），它作為唯一數(shù)據(jù)源存在，每個應(yīng)用僅僅有一個store實(shí)例。
單一狀態(tài)樹使得我們能夠直接定位任一特定的狀態(tài)片段，在調(diào)試過程中也能輕易地取得整個當(dāng)前應(yīng)用狀態(tài)的快照。
在Vue組件中獲得Vuex狀態(tài)
Vuex的狀態(tài)存儲是相應(yīng)式的。在Vue組件中獲取Vuex狀態(tài)總共有 五種 可行的方法。
1.從store實(shí)例中讀取狀態(tài)最簡單的方法就是在計(jì)算屬性中返回某個狀態(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ā)生變化，都會重新求取計(jì)算屬性，并且出發(fā)更新相關(guān)聯(lián)的DOM
缺點(diǎn)：這種模式導(dǎo)致組件依賴全局狀態(tài)單例。在每個需要state的組件中需要頻繁地導(dǎo)入，并且在測試組件時需要模擬狀態(tài)。
Vuex通過store選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件注入到每一個子組件中，前提是要調(diào)用Vue.use(Vuex)
const app=new Vue({
el:'#app',
store,//根組件通過store選項(xiàng)將store實(shí)例注入所有地子組件
components:{ Counter },
template:`
<div class="app">
<Counter><Counter>
</div>
`
})
上面的代碼能夠讓子組件通過this.$store訪問到store實(shí)例。
2.于是，Counter組件可以按照下面的實(shí)現(xiàn)來訪問store，而不用頻繁導(dǎo)入state的組件。
const Counter={
template:`<div>{{ counter }}</div>`,
computed:{
count(){
return this.$state.count
}
}
}
mapState輔助函數(shù)（用于獲取多個state狀態(tài)）
當(dāng)一個組件需要獲取多個狀態(tài)的時候，將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余（如上面代碼的count函數(shù)），避免這個問題，
3.我們可以用mapState輔助函數(shù)幫助我們生成計(jì)算屬性，讓我們少敲幾個?。?/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)相同時，我們給mapState傳一個字符串?dāng)?shù)組。
computed:mapState([ 'count' ])
5.對象展開運(yùn)算符
上面的3、4都是mapState單獨(dú)使用在computed屬性中，但是如果要和普通的局部計(jì)算屬性混合使用的時候，我們用對象展開運(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)格屬于單個組件，最好是作為組件的局部狀態(tài)，要根據(jù)應(yīng)用開發(fā)進(jìn)行權(quán)衡和確定。
以上這篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
這篇文章主要介紹了Vue.js 2.0 和 React、Augular等其他前端框架大比拼的相關(guān)資料,React 和 Vue 有許多相似之處,本文給大家提到，需要的朋友可以參考下2016-10-10
vue3集成Element-plus實(shí)現(xiàn)按需自動引入組件的方法總結(jié)
vue3出來一段時間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關(guān)于vue3集成Element-plus實(shí)現(xiàn)按需自動引入組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要給大家介紹了關(guān)于Vue3在router中使用pinia報錯的簡單解決辦法,什么是pinia,可以理解為狀態(tài)管理工具,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實(shí)例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-08-08
vuex分模塊后,實(shí)現(xiàn)獲取state的值
這篇文章主要介紹了vuex分模塊后,實(shí)現(xiàn)獲取state的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue-cli 使用json server在本地模擬請求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請求數(shù)據(jù)的示例代碼，非常具有實(shí)用價值，需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js的安裝方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue3 elementUI如何修改el-date-picker默認(rèn)時間
這篇文章主要介紹了Vue3 elementUI如何修改el-date-picker默認(rèn)時間，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue的template模板是如何轉(zhuǎn)為render函數(shù)的過程
Vue從template到render函數(shù)的轉(zhuǎn)換經(jīng)歷模板解析、AST構(gòu)建、優(yōu)化、生成渲染函數(shù)等步驟,首先進(jìn)行詞法分析將模板拆解為tokens,再進(jìn)行語法分析構(gòu)建AST,然后對AST進(jìn)行靜態(tài)標(biāo)記和提升優(yōu)化,最后轉(zhuǎn)換成JavaScript渲染函數(shù),生成虛擬DOM,完成組件的渲染和更新,實(shí)現(xiàn)了模板的高效轉(zhuǎn)化2024-10-10
這篇文章介紹了VUE中v-if與v-show的區(qū)別，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03