时间戳

首页 > 解决方案 > Vuex 中具有多个属性值的有效负载

vue.js - Vuex 中具有多个属性值的有效负载

问题描述

我有这个演示：https ://codepen.io/Albvadi/pen/abdVZxO

我想在有效载荷中传递标题和类，但只读取类......

如果我将@click事件更改为传递对象，则 JS 不会编译：

// Compiles but dont work
<button
    class="btn btn-primary" 
    @click="addComponent('primary', 'My Title')"
>PrimaryAlert</button>

// No compile
<button
    class="btn btn-primary" 
    @click="addComponent({'primary', 'My Title'})"
>PrimaryAlert</button>

错误编译

Vue warn]: Error compiling template:

invalid expression: Unexpected token ',' in

    addComponent({'primary', 'My Title'})

  Raw expression: @click="addComponent({'primary', 'My Title'})"


19 |                          <div class="row">
20 |                              <div class="col">
21 |                                  <button class="btn btn-primary" @click="addComponent({'primary', 'My Title'})">Primary
   |                                                                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
22 |                                      Alert</button>
23 |                                  <button class="btn btn-warning" @click="addComponent('warning')">Warning

怎么了？

标签： vue.jsvuexpayloadmutation

解决方案

您只能将一个有效负载数据发送到参数的突变，因此如果您需要发送多个数据，则需要发送一个对象，将您的更改@click为：

@click="addComponent({classAlert: 'primary', title: 'My Title'})"

@click="addComponent({classAlert: 'warning'})"

@click="addComponent({classAlert: 'danger'})"

@click="addComponent({classAlert: 'dark'})"

和你的突变参数：

// destructuring the parameter
addComponent(state, { classAlert, title }) {
  console.log(classAlert);
  console.log(title);
}

// not destructed version
addComponent(state, data) {

   const classAlert = data.classAlert;
   const title = data.title;

   console.log(classAlert);
   console.log(title);
}

演示：https ://codepen.io/vincentjonathan99/pen/vYLWXeR

推荐阅读