Javascript スプレッド演算子メモ

概要

スプレッド演算子がなにかわからない

// このようにも書ける1
...mapGetters([
      'getGenreById'
])

この...の書き方わからなかった．

結果

javascript のスプレッド演算子の書き方であった． Vue.js に依存する書き方ではない．

参考: https://www.it-swarm-ja.tech/ja/javascript/%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E6%A7%8B%E6%96%87%EF%BC%88%EF%BC%89%E3%81%AFmapgetters%E3%81%A7%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/836866119/

mapGettersとmapActionsは、基本的にvuexが提供するヘルパーであり、メソッド名としてキーを持ち、定義が定義されたメソッドとして値を持つオブジェクトを返します。このオブジェクトを...（オブジェクトスプレッド演算子）と組み合わせると、それを計算オブジェクトまたはメソッドオブジェクトの個々の関数にそれぞれ広げます。

実装例

moview_list.vue

<script>
import axios from "axios";
import {mapState, mapGetters} from 'vuex';
export default {
    created() {
        this.$store.dispatch('set_movie_list')
    },
    computed: {
        saleMovies(){
            return this.$store.getters.saleMovies;
        },
        // このようにも書ける1
        // ...mapGetters([
        //     'getGenreById'
        // ])
        // このようにも書ける2
        getGenreById() { 
            return this.$store.getters.getGenreById;
        },
    }, 
}
</script>