vuex能传参吗_vuex中多参数的传递

vuex中多参数的传递

2020年9月1日 21:00 by scott

web开发

vue

本文主要解决两个问题：

1. ref组件怎么在vuex中传递；

2. 有个多个参数时怎么在vuex中传递；

说明：下文代码中和问题无关的内容将省略显示。

ref组件作为参数传递给action

template中的部分片段如下：

:key="liIndex" style="width: 15.6rem;">

:style="liChildIndex%2 == 0 ? 'margin-right: 1rem' : 'margin-left: 1rem;'"

style="position: relative;"

@click="choicCompose(index,liIndex,liChildIndex)" ref="childItem">

{{liChild}}

问题1：v-if 可以放在li标签上吗？

问题2：methods中怎么在 choicCompose(index,liIndex,liChildIndex) 中对当前div(ref="childItem")进行处理？

请读者先思考下，一会到文末看答案。

怎么在methods中分发动作到Action

问题3：怎么在action中添加多个参数？

问题4：怎么在mutation中添加多个参数？

------------------------------------分割线-----------------------------------------

答案如下：

答1：不可以，v-if 和 v-for 不能同时出现在一个元素上。解决方法是把v-if放在父元素上，如上面的代码所示。

答2：choicCompose定义如下：

methods: {

choicCompose(index, liIndex, liChildIndex) {//组合单选

this.$store.dispatch('choicCompose', {$refs: this.$refs, index, liIndex, liChildIndex})

},

choiceRadio(index, liIndex) {//单选操作

this.$store.dispatch('choiceRadio', {$refs: this.$refs, index, liIndex})

},

choiceCheck(index, liIndex) {//多选操作

this.$store.dispatch('choiceCheck', {$refs: this.$refs, index, liIndex})

},

}

注意$refs参数的传递，这里把整个对象 {$refs: this.$refs, index, liIndex, liChildIndex} 作为参数传递。

答3：把多个参数作为一个对象传递到action中，如答2所示。

答4：具体传递方法见这个代码：

actions:{

choicCompose({commit}, {$refs, index, liIndex, liChildIndex}) {//组合单选

commit('GEN_CHOICE', {$refs, index:index, liIndex:liIndex, choiceStyle:1, liChildIndex})

},}

mutations: {

GEN_CHOICE(state, {$refs, index, liIndex, choiceStyle, liChildIndex}) {

//具体处理过程

},}

如有其他问题，请在下方评论留言。

Comment

×

Name

Email address

Comment

Close

Submit

Not Comment!