Vue.jsで引数をうまく渡せず詰まった時の話〜引数分割束縛〜

やりたかったことと詰まった背景

• Vue.jsでフロントエンドの実装。一覧表示の画面から１つのアイテムをクリックすると、その詳細ページに飛べるように実装したい。

• 詳細画面のアイテムの情報自体はサーパーサイドからJSON形式で送られてくる。その送られてきた情報が載っているURL＋クリックしたアイテムのidを詳細画面のURLにしたい。

• 上記の理由より、URLとクリックされたアイテムのidとを引数として関数に持たせようとしたが、ただカッコの中に引数を渡すだけではうまくいかなかった。

• 調べて出てきた下記の、引数分割束縛という書き方で実装しようとした。

関数（引数が2つ以上の時の書き方）

//波カッコに入れる。
event({第一引数, 第二引数, 第三引数, 第四引数})

引数分割束縛。
引数を波括弧で囲って使用する。

以下今週一番躓いたところ。

// view/detail.vue

    methods: {
      ...mapActions([
        'get_detail_ajax'
      ])
    },
    mounted() {
      this.get_detail_ajax(url, this.id).then(()=>{
          console.log(url,this.id)   //←ここではちゃんと値が取れてる。
          this.detail = this.$store.detail;
        });
    }

// store/index.js

  actions: {
    get_detail_ajax(context,{ url, id }) {
      console.log(url, id); //両方ともundefinedに。
      return axios.get(URL_BASE + url + id, {
          headers: {
            "Content-Type": "application/json",
            "Authorization": 'Bearer ' + token
          },
          responseType: 'json',
        })
        .then((res) => {
          Vue.set(this, 'detail', res.data);
        })
    },
  }

contextを抜くかもしくは引数に波括弧を使わなければちゃんと値を取得できたが、contextがないといらない情報もたくさん渡ってきてしまうし、個別ページなのでidもURLに含めたい。
（var url="http://〇〇..."と変数を宣言するときに、:idをどうにか含めようとしましたがエラーに。式展開してもダメでした...）

苦肉の解決策

無理やりくっつけて引数を減らしました。

// view/detail.vue

    methods: {
      ...mapActions([
        'get_detail_ajax'
      ])
    },
    mounted() {
      var id = this.id;
      url = url + id //再代入してURLにidを含ませる。
      this.get_detail_ajax(url).then(()=>{
          this.detail = this.$store.detail;
        });
    }

// store/index.js

    get_detail_ajax(context, url) {
      return axios.get(URL_BASE + url, {
          headers: {
            "Content-Type": "application/json",
            "Authorization": 'Bearer ' + token
          },
          responseType: 'json',
        })
        .then((res) => {
          Vue.set(this, 'detail', res.data);
        })
    },

なぜ波括弧を使うと取得できないのか、また判明すれば追記いたします。

追記

親切な方がコメント欄で丁寧に教えてくださったのでメモ。

引数を引数分割束縛で持たせる場合、同じオブジェクト内のものしか持たせることができない。

// view側

var hoge = "第一引数"
var huga = "第二引数"
var moge = "第三引数"

hogeHugaMoge (hoge,huga,moge)

とある場合、同じオブジェクトではないので

// store側

hogeHugaMoge ({hoge,huga,moge}){
  console.log(hoge,huga,moge);  //エラーとなる
}

上記のようには使用できない。

なので下記のように１つのオブジェクトにまとめて入れて...

// view側

var hogehugamoge = {
  hoge: "第一引数",
  huga: "第二引数",
  moge: "第三引数"
}

hogeHugaMoge(hogehugamoge)

// store側

hogeHugaMoge ({hoge,huga,moge}){
  console.log(hoge,huga,moge);  //第一引数、第二引数、第三引数がちゃんと渡ってくる！
}

成功！

Vue.jsのactionでは指定できる引数は1つ迄のようです。

上記の方法でちゃんと実装できました！コメントいただき本当にありがとうございました！