操作功能无法识别数据 vuex

Question

我正在尝试根据组件上的选择列表进行切换情况。

<div class="col-md-7">
<select class="form-control" id="sel1" v-model="getDocumentSettings.margin" @change="customMargin(getDocumentSettings.margin)">
<option v-for="item in getMarginOptions">{{item}}</option>
</select>
</div>

getMarginOptions是一个计算属性，它向我返回一个选择列表，可以是

marginOptions: [
"Custom",
"Normal",
"Narrow",
"Moderate",
"Wide",
"Mirrored",
"Office Default"
]

这些数据在 Vuex 存储中并被检索，我的问题是根据选择更改其他数据，当用户选择一个属性时，我想更改我在这个对象中的边距(左、右、上、下((在 Vuex 内部也是如此(

Doc: {
key: "Document",
left: 0,
right: 0,
top: 0,
fileName: "",
bottom: 0,
margin: "Custom",
},

所以我在我的 vuex 里放了一个开关盒，就像这样：

actions: {
customMargin(obj) {
switch (obj.data) {
case "Custom": obj.type.Doc.left = 0; obj.type.Doc.right = 0; obj.type.Doc.top = 0; obj.type.Doc.bottom = 0;
break;
case "Normal": obj.type.Doc.left = 1; obj.type.Doc.right = 1; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1;
break;
case "Narrow": obj.type.Doc.left = 0.5; obj.type.Doc.right = 0.5; obj.type.Doc.top = 0.5; obj.type.Doc.bottom = 0.5;
break;
case "Moderate": obj.type.Doc.left = 0.75; obj.type.Doc.right = 0.75; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1;
break;
case "Wide": obj.type.Doc.left = 2; obj.type.Doc.right = 2; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1;
break;
case "Mirrored": obj.type.Doc.left = 1.25; obj.type.Doc.right = 1; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1;
break;
case "Office Default": obj.type.Doc.left = 1.25; obj.type.Doc.right = 1.25; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1;
break;
default: obj.type.Doc.left = 0; obj.type.Doc.right = 0; obj.type.Doc.top = 0; obj.type.Doc.bottom = 0;
break;
}
}
}

它应该接收一个状态对象，以便我可以访问我的文档，以及选择的选项，这就是我所说的：

methods: {
customMargin(option) {
this.$store.dispatch({
type: 'customMargin',
data: option
})
},
},

我认为我的问题之一是我如何处理 vuex 的操作，我想从选择中发送选项并更改 vuex 中的文档边距。

Answer 1

我的客人认为问题出在 vuex 中的操作处理程序中

actions: {
customMargin(context, obj)  {
// your logic here
} 
}

第一个操作参数是使用提交等方法存储上下文

您始终可以在操作处理程序中添加console.log(arguments)以检查传递到函数中的确切内容