vue mutations方法如何动态修改对象内参数？

站长

2024年07月14日 09:26 · 阅读数 9

通过updateSetting()方法修改这个setting里面的任意参数，有没有什么办法让这个方法动态传参，直接用state.setting.传过来的名称,并赋值this.$store.commit('updateSetting',params);，而不用写多个方法给setting里其它参数赋值，

state:{
    setting:{
      tag: {
        top: 0,
        left: 0,
        tagId: ''
      },
      params: '',
      params1: ''
    }
}

updateSetting(state,params){
     //类似下面这种形式
    state.setting.params=params.value
}

1个回答

test

2024-07-14

可以通过 Object.keys() 来获取所有的属性名然后遍历赋值，或者使用 ... 的展开符。

比如说

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    setting:{
      tag: {
        top: 0,
        left: 0,
        tagId: ''
      },
      params: '',
      params1: ''
    }
  },
  mutations: {
    updateSetting(state,params){
      const keys = Object.keys(params)
      keys.forEach(key=> state.setting[key] = params[key])
    },
    // 或者
    updateSetting2(state,params){
      state.state = { ...state, ...params }
    }
  }
})

只不过这里我没有去做 state.tag.top 这样的赋值，其实你也可以通过使用 lodash 的 merge 方发来做合并处理。

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容