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

Answer 1

我是客人，问题出在你的vuex行动处理程序

中

console.log(arguments)

第一个动作参数是存储上下文，其中包含commit

等方法

您始终可以在动作处理程序中添加var myLatLng = new google.maps.LatLng(-29.833959630595874, 30.35492856055498); google.maps.Geocoder().geocode({'latLng': myLatLng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { alert(results[0].formatted_addres); } else { alert( "Geocoder impossible"); }以检查传递给函数的确切内容

动作功能无法识别数据vuex

1 个答案: