action function does not recognize data vuex

Question

I am trying to do a switch case based on a select list that I have on my component.

   <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 is a computed propertie that returns me a list of choices, that can be

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

this data is in vuex store and is retrieved, my problem is to change other data based on the selection, when a user select a propertie I want to change margins(left,right,top,bottom) that I have in this object (inside vuex too)

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

so I put a switch case inside my vuex like this:

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;
            }
        }
    }

it should receive a state object so I can access my doc,and the option that was selected, this is how I call it:

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

I think 1 of my problem is the way how I handle actions with vuex, I want to send the option from the select and change the doc margin inside vuex.

Answer 1

I guest that problem is in your action handler in vuex

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

First action parameter is store context with methods like commit

You can always add console.log(arguments) in action handler to check what exactly is passed into a function