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

Question

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

我想在负载中传递标题和 class，但只读取了 class...

如果我更改 @click 事件以传递 object，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

您只能将一个有效负载数据发送到参数的突变，因此如果您需要发送多个数据，则需要发送一个对象，将您的 @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

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

Payload with multiple properties values in Vuex

payload

mutation

vue.js

vuex