vuex中多参数的传递

2020年9月1日 21:00 by scott

web开发 vue

---

本文主要解决两个问题：

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

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

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

ref组件作为参数传递给action

template中的部分片段如下：

<div v-if="item.multiSelect == 1">
    <li v-for="(li, liIndex) in item.subject.option"
        :key="liIndex" style="width: 15.6rem;">
        <div v-for="(liChild, liChildIndex) in li.groups" :key="liChildIndex"
             :style="liChildIndex%2 == 0 ? 'margin-right: 1rem' : 'margin-left: 1rem;'"
             style="position: relative;"
             @click="choicCompose(index,liIndex,liChildIndex)" ref="childItem">
            <span>{{liChild}}</span>
        </div>
    </li>
</div>

问题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}) {
    //具体处理过程
},}

 

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

---