Vuex中如何getters動(dòng)態(tài)獲取state的值

更新時(shí)間：2022年08月31日 17:09:31 作者：Juice-Dreamer

這篇文章主要介紹了Vuex中如何getters動(dòng)態(tài)獲取state的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vuex getters動(dòng)態(tài)獲取state的值

在做項(xiàng)目時(shí)，getters里有很多冗余代碼，但是仔細(xì)一看可以根據(jù)參數(shù)來(lái)解決，于是決定使用傳參來(lái)進(jìn)行獲取，減少代碼冗余。

案例

需求：在getters里能夠根據(jù)值動(dòng)態(tài)獲取到people的元素。經(jīng)過(guò)多次嘗試，最終得到下面的代碼。

state.js代碼如下：

export default {
  people: [
    {
      name: 'zs',
      age: 14
    },
    {
      name: 'ss',
      age: 24
    },
    {
      name: 'gh',
      age: 34
    }
  ]
}

getters.js代碼如下：

const getters = {
// 根據(jù)index獲取state.person[index]
  getPerson: function (state) {
    // console.log(state)
    return function (index) {
      return state.people[index]
    }
  }, 
  // 獲取state.person[0]
  getPerson1: function (state) {
    // console.log('getPerson1:', state.people[0]) 
    // console.log(typeof getters.getPerson) return function
    // console.log(getters.getPerson(state)(1))  注： state不傳過(guò)去的話，getPerson()找不到state
    return getters.getPerson(state)(1) // 成功獲取state.person[0]
  },
  getPerson2: function (state) {
    return getters.getPerson(state)(2) // 成功獲取到state.person[1]
  }
}
export default getters

說(shuō)明

因?yàn)轫?xiàng)目中數(shù)據(jù)還要響應(yīng)式，因此我使用setInterval方法來(lái)模擬是否會(huì)實(shí)時(shí)更新，事實(shí)證明可以，因此可以推薦用這種方法。

Vuex state值更改但是getters未更新

實(shí)現(xiàn)效果

選擇一種交通工具則出現(xiàn)對(duì)應(yīng)的席別列表。

state：

 seatList: {},//初始席別

最后state結(jié)果：

seatList: {
  '1':[{
  code:"101",
  name:'經(jīng)濟(jì)艙'
  },{
  code:"102",
  name:'公務(wù)艙'
  }],
  '2':[{
    code:"201",
    name:'商務(wù)座'
  },
  ...
  ]
},

getters：

seatListItem:(state)=>(key)=>{
    let list=state.common.seatList;
    return list[key]?list[key]:[]
  },

mutations：

SET_SEAT_LIST: (state,data) => {
      state.seatList = null;//問(wèn)題出現(xiàn)在此處，對(duì)象要先置為null再賦值就可
      state.seatList= data;
    },

template：

<!-- 席別-->
          <el-select v-if="scope.row.vehicleCode&&seatListItem(scope.row.vehicleCode)" placeholder="" size="small"
                     class="selectWidth"
                     @change="handleChangeSeatType($event,scope.$index,receiptTableArr)"
                     v-model="scope.row.seatName"
                     :disabled="types == 'look'||!scope.row.vehicleCode"
                     v-bind:class="[types == 'look'?'numberStyleLocck':'','clearCursor']">
            <el-option
              v-for="(item,itenIndex) in seatListItem(scope.row.vehicleCode)"
              :label="item.value"
              :value="item"
              :key="itenIndex"
            ></el-option>
          </el-select>

computed：

computed: {
      ...mapState({
        vehicleList: state => state.vehicleList,//交通工具
        seatList: state => state.seatList,//席別
      }),
      ...mapGetters(['seatListItem'])
    },

methods：

getVehicleList(other){
      getVehicleSeatList({
        type:'JT',
        other 
      }).then((res)=>{
        if(res.data.code==200){
          const data = res.data.data;
          let seatList= this.$store.state.seatList;
              if(!seatList[other]){
                seatList[other]=data
              }
              this.$store.commit('SET_SEAT_LIST', seatList, params.other);
        } else {
          this.$message.warning('獲取交通工具席別失敗');
          return false
        }
      })
    },

最后發(fā)現(xiàn)，在mutations中要先將state設(shè)置為空然后再賦值，否則不更新。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: