动作函数不识别数据 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
  } 
}

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

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