Vuex使用單一狀態樹（一個對象就包含了全部的應用層級狀態），它作為唯一數據源存在，每個應用僅僅有一個store實例。
單一狀態樹使得我們能夠直接定位任一特定的狀態片段，在調試過程中也能輕易地取得整個當前應用狀態的快照。
在Vue組件中獲得Vuex狀態
Vuex的狀態存儲是相應式的。在Vue組件中獲取Vuex狀態總共有 五種 可行的方法。
1.從store實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態：（需要導入store組件）
const Counter={
template:`<div>{{ count }}</div>`,
computed:{
count(){
return store.state.count//返回store實例的count狀態
}
}
}
每當store.state.count發生變化，都會重新求取計算屬性，并且出發更新相關聯的DOM
缺點：這種模式導致組件依賴全局狀態單例。在每個需要state的組件中需要頻繁地導入，并且在測試組件時需要模擬狀態。
Vuex通過store選項，提供了一種機制將狀態從根組件注入到每一個子組件中，前提是要調用Vue.use(Vuex)
const app=new Vue({
el:'#app',
store,//根組件通過store選項將store實例注入所有地子組件
components:{ Counter },
template:`
<div class="app">
<Counter><Counter>
</div>
`
})
上面的代碼能夠讓子組件通過this.$store訪問到store實例。
2.于是，Counter組件可以按照下面的實現來訪問store，而不用頻繁導入state的組件。
const Counter={
template:`<div>{{ counter }}</div>`,
computed:{
count(){
return this.$state.count
}
}
}
mapState輔助函數（用于獲取多個state狀態）
當一個組件需要獲取多個狀態的時候，將這些狀態都聲明為計算屬性會有些重復和冗余（如上面代碼的count函數），避免這個問題，
3.我們可以用mapState輔助函數幫助我們生成計算屬性，讓我們少敲幾個?。?/strong>
import { mapState } from 'vuex'
export default{
computed:mapState({
//方式一：箭頭函數
count:state => state.count,
//方式二：傳字符串參數
countAlias:'count',
//如果要使用this獲取局部狀態，就要使用常規函數了！
countPlusLocalState(state){
return state.count+this.localCount
}
})
}
4.如果映射的計算屬性的名稱與state的子節點相同時，我們給mapState傳一個字符串數組。
computed:mapState([ 'count' ])
5.對象展開運算符
上面的3、4都是mapState單獨使用在computed屬性中，但是如果要和普通的局部計算屬性混合使用的時候，我們用對象展開運算符(…)
import { mapState,mapGetter } from 'vuex'
export default{
methods:{
increment(){
this.$store.commit('increment');
}
},
computed:{
elsecomputed(){},//這是普通的局部計算屬性
...mapGetters([
'count'
]),
...mapState({
counts(){
return this.$store.state.count;
}
}
})
}
}
并不需要把所有狀態都放到Vuex,有些狀態嚴格屬于單個組件，最好是作為組件的局部狀態，要根據應用開發進行權衡和確定。
以上這篇Vuex 在Vue 組件中獲得Vuex 狀態state的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
