Vuex中如何getters动态获取state的值

 更新时间:2022年08月31日 17:09:31   作者:Juice-Dreamer  
这篇文章主要介绍了Vuex中如何getters动态获取state的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vuex getters动态获取state的值

在做项目时,getters里有很多冗余代码,但是仔细一看可以根据参数来解决,于是决定使用传参来进行获取,减少代码冗余。

案例

需求:在getters里能够根据值动态获取到people的元素。经过多次尝试,最终得到下面的代码。 

state.js代码如下:

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

getters.js代码如下:

const getters = {
// 根据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不传过去的话,getPerson()找不到state
    return getters.getPerson(state)(1) // 成功获取state.person[0]
  },
  getPerson2: function (state) {
    return getters.getPerson(state)(2) // 成功获取到state.person[1]
  }
}
export default getters

说明

因为项目中数据还要响应式,因此我使用setInterval方法来模拟是否会实时更新,事实证明可以,因此可以推荐用这种方法。

Vuex state值更改但是getters未更新

实现效果

选择一种交通工具则出现对应的席别列表。

state:

 seatList: {},//初始席别

最后state结果:

seatList: {
  '1':[{
  code:"101",
  name:'经济舱'
  },{
  code:"102",
  name:'公务舱'
  }],
  '2':[{
    code:"201",
    name:'商务座'
  },
  ...
  ]
},

getters:

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

mutations:

SET_SEAT_LIST: (state,data) => {
      state.seatList = null;//问题出现在此处,对象要先置为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
        }
      })
    },

最后发现,在mutations中要先将state设置为空然后再赋值,否则不更新。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue+element ui表格添加多个搜索条件筛选功能(前端查询)

    vue+element ui表格添加多个搜索条件筛选功能(前端查询)

    这篇文章主要给大家介绍了关于vue+element ui表格添加多个搜索条件筛选功能的相关资料,最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,需要的朋友可以参考下
    2023-08-08
  • 深入分析element ScrollBar滚动组件源码

    深入分析element ScrollBar滚动组件源码

    这篇文章主要介绍了element ScrollBar滚动组件源码深入分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 深入探讨Vue 3中的组合式函数编程方式

    深入探讨Vue 3中的组合式函数编程方式

    Vue 3中引入了组合式函数编程方式,可以更好地实现代码的复用和可维护性。通过定义可组合的函数,可以将组件的逻辑和状态进行拆分和组合,实现更灵活的代码组织方式。同时,组合式函数也支持响应式数据和生命周期钩子函数,更加贴近Vue开发的实际场景
    2023-05-05
  • vue3使用echarts绘制折线图的代码示例

    vue3使用echarts绘制折线图的代码示例

    这篇文章主要为大家学习介绍了Vue3如何使用echarts实现绘制折线图,文中有详细的示例代码供大家参考,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-07-07
  • vue3清空let arr = reactive([])的实现示例

    vue3清空let arr = reactive([])的实现示例

    本文主要介绍了vue3清空let arr = reactive([])的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-03-03
  • Vue 中 createElement 使用实例详解

    Vue 中 createElement 使用实例详解

    Vue 提供了createElement 来创建虚拟dom,方便我们来函数化的方式来定义复杂的组件结构,这篇文章主要介绍了Vue 中 createElement 使用详解,需要的朋友可以参考下
    2022-10-10
  • vue改变数据后数据变化页面不刷新的解决方法

    vue改变数据后数据变化页面不刷新的解决方法

    这篇文章主要给大家介绍了关于vue改变数据后数据变化页面不刷新的解决方法,vue比较常见的坑就是数据(后台返回)更新了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue3获取、设置元素高度的代码举例

    vue3获取、设置元素高度的代码举例

    这篇文章主要给大家介绍了关于vue3获取、设置元素高度的相关资料,小编通过实际案例向大家展示操作过程,操作方法简单易懂,需要的朋友可以参考下
    2024-08-08
  • vue使用H5的audio标签问题

    vue使用H5的audio标签问题

    这篇文章主要介绍了vue使用H5的audio标签问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • elementui[el-table]toggleRowSelection默认多选事件无法选中问题

    elementui[el-table]toggleRowSelection默认多选事件无法选中问题

    这篇文章主要介绍了elementui[el-table]toggleRowSelection默认多选事件无法选中问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论