vuex传变量，获取不同的state

最新推荐文章于 2023-01-31 17:29:06 发布

wang0112233

最新推荐文章于 2023-01-31 17:29:06 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js和前端的探险文章标签： vue vuex getters mutations vuex传变量

本文链接：https://blog.youkuaiyun.com/wang0112233/article/details/93995411

js和前端的探险专栏收录该内容

13 篇文章

订阅专栏

本文探讨在Vue应用中，如何通过Vuex更高效地处理不同协议类型的动态获取问题，避免冗长代码，提高代码可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到的问题：

一级菜单获取到不同的名称，对应二级菜单不同的名称如：

虽然不放在vuex中也可以做到，但是如果协议类型很多的话，那么判断需要很多，会有很多的冗长的代码

如果协议名称很多的话，代码依然会很长，而且这些常量写到逻辑里面会影响阅读效果，这样就考虑到放在vuex中

但是通常普通调用store是不能够传一个变量的如：

 changeProtocolType (protocolType) {
           this.dialogConfig.formItems.rows[0].cols[0].items[4].options = this.$store.getters.protocolType
//这边并不能够这样写，因为getters没有这个protocolType,会报undefined,因为规定是需要传一个定值的

    }

解决方法：

1在getter中传参

那么现在修改getter中的方法

 getProtocolName: (state) => {
    return (key) => {
      return state.protocol[key]
    }
  }

现在调用的时候就可以传一个变量进来，然后获取不同的state

 changeProtocolType (protocolType) {
      this.dialogConfig.formItems.rows[0].cols[0].items[4].options = this.$store.getters.getProtocolName(protocolType)
    }

如试例中，我首先传进来的是s7，那么就会获取到protocol.js中state 的 s7

如果传进来的是cip，那么就会获取到protocol.js中state 的 cip

2直接调用state(不用改造，推荐)

     this.$store.state.protocol[protocolType]

后续扩展（未解决）：

尝试了使用mutation改变不同的state，但是查阅了资料大多都是只改变state中的值的，但是变量依然是可以有效的传到mutations中，但是卡在了不知如何把不同的state输出，如果有同样遇到这个问题并解决了的，希望可以提供一个方法思路

mutations: {
    SET_PROTOCOL: (state, x) => {
      if (x === 'cip') {
        console.log('进来了')
        return state[x]
      }
    }
  }

附上protocol.js


const protocol = {
  state: {
    protocolType: [
      { label: 'cip', value: 'cip' },
      { label: 's7', value: 's7' }

    ],
    cip: [{ label: 'cip.addstat' }, { label: 'cip.addstat_size' }, { label: 'cip.apply_attributes.data' }],
    s7: [{ label: 's7comm.alarm.ack_state.coming ' }, { label: 's7comm.alarm.ack_state.going' }, { label: 's7comm.alarm.associated_value' }]
  }

}

export default protocol