Vuex 中具有多个属性值的有效负载

Question

我有这个演示：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

怎么了？

Answer 1

您只能向参数中的mutations发送一个payload数据，因此如果您需要发送多个数据，则需要发送一个对象，请将您的@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