私はコンポーネント上にある選択リストに基づいてスイッチケースを実行しようとしています。アクション関数がデータを再集計しないvuex
<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
私に選択肢のリストを返す計算さpropertieで、それは
marginOptions: [
"Custom",
"Normal",
"Narrow",
"Moderate",
"Wide",
"Mirrored",
"Office Default"
]
することができ、このデータはvuex店であり、取得された、私の問題は、に基づいて、他のデータを変更することですユーザーは、私が(あまりにもvuex内)このオブジェクトを持っている私はマージン(左、右、上、下)を変更したいpropertieを選択する際の選択、
Doc: {
key: "Document",
left: 0,
right: 0,
top: 0,
fileName: "",
bottom: 0,
margin: "Custom",
},
ので、私はswtich CAを置きますSEは、私のこのようなvuex内側:
methods: {
customMargin(option) {
this.$store.dispatch({
type: 'customMargin',
data: option
})
},
},
私は思う:私は私のドキュメントにアクセスできるように
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;
}
}
}
が、それは状態オブジェクトを受け取る必要があり、選択されたオプション、これは私がそれを呼び出す方法です私の問題の1つは、どのように私はvuexでアクションを処理する方法です、私は選択からオプションを送信し、vuex内のドキュメントマージンを変更したいです。
助けが必要ですか?以下のような方法はあなたが常に渡された正確に何をチェックするアクションハンドラにconsole.log(arguments)
を追加することができます
をコミットすると、問題がvuex
actions: {
customMargin(context, obj) {
// your logic here
}
}
まず、アクションパラメータであなたのアクション・ハンドラであることを
仕事の友人、引数型のthanskfは本当に便利だった:D –