mapstateとは

一言でいうと、ストアのデータ呼び出しの記述を短くするためのもの、です。
this.$store.state.プロパティ名 でストアのデータを呼び出スことが可能です。しかしそれでは長くなり、可読性が落ちてしまうので computed にまとめて呼び出すことができます。

mapStore自体がオブジェクトを返すのでこのようにします。

<script>

import { mapState } from "vuex"; // vuexからmapStateをimport

export default {
  computed: mapState(["lists"]),
};
</script>

本来はコンポーネント内で this.$store.state.lists と記述しますが、 mapState を使うことで、 state に this.$store.state が代入され、簡潔に呼び出しができます

最初に紹介した方法では、computedが定義できませんが、こんな記述方法もあります。

computed: {

  ...mapState(["lists"]),

  otherFunction() {
    // 略
  },
},

...　←の意味

これ（ ... ）はスプレッド構文という名前で、オブジェクトを個々の値に展開することができるものです。

スプレッド構文を使わず下記の様にしてしまうと・・

computed: {
  mapState(['lists']),
}

mapstateがオブジェクトを返すので、このように {} が重なった状態になってしまいます。

computed: {

  {
    lists () {
      return this.$store.state.lists
    },
  }

}