Vuex在Vue組件中獲得Vuex狀態(tài)state的方法

Vuex使用單一狀態(tài)樹（一個對象就包含了全部的應用層級狀態(tài)），它作為唯一數(shù)據(jù)源存在，每個應用僅僅有一個store實例。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比鎮(zhèn)賚網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式鎮(zhèn)賚網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋鎮(zhèn)賚地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

單一狀態(tài)樹使得我們能夠直接定位任一特定的狀態(tài)片段，在調(diào)試過程中也能輕易地取得整個當前應用狀態(tài)的快照。

在Vue組件中獲得Vuex狀態(tài)

Vuex的狀態(tài)存儲是相應式的。在Vue組件中獲取Vuex狀態(tài)總共有 五種 可行的方法。

1.從store實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)：（需要導入store組件）

const Counter={
 template:`<div>{{ count }}</div>`,
 computed:{
 count(){
  return store.state.count//返回store實例的count狀態(tài)
 }
 }
}

每當store.state.count發(fā)生變化，都會重新求取計算屬性，并且出發(fā)更新相關聯(lián)的DOM

缺點：這種模式導致組件依賴全局狀態(tài)單例。在每個需要state的組件中需要頻繁地導入，并且在測試組件時需要模擬狀態(tài)。

Vuex通過store選項，提供了一種機制將狀態(tài)從根組件注入到每一個子組件中，前提是要調(diào)用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組件可以按照下面的實現(xiàn)來訪問store，而不用頻繁導入state的組件。

const Counter={
 template:`<div>{{ counter }}</div>`,
 computed:{
 count(){
  return this.$state.count
 }
 }
}

mapState輔助函數(shù)（用于獲取多個state狀態(tài)）

當一個組件需要獲取多個狀態(tài)的時候，將這些狀態(tài)都聲明為計算屬性會有些重復和冗余（如上面代碼的count函數(shù)），避免這個問題，

3.我們可以用mapState輔助函數(shù)幫助我們生成計算屬性，讓我們少敲幾個?。?/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.如果映射的計算屬性的名稱與state的子節(jié)點相同時，我們給mapState傳一個字符串數(shù)組。

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;
  }
  }
 })
 }
}

并不需要把所有狀態(tài)都放到Vuex,有些狀態(tài)嚴格屬于單個組件，最好是作為組件的局部狀態(tài)，要根據(jù)應用開發(fā)進行權(quán)衡和確定。

以上這篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。