javascript - Action 函数无法识别vuex数据

Question

我正在尝试根据组件上的选择列表执行 switch case。

   <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 中放置了一个 switch case，如下所示:

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 处理操作的方式，我想从 select 发送选项并更改 vuex 内的文档边距。

Answer 1

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

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

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

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