Vue.js:ストアについて

Vueのストアを勉強するため、その処理を使ったアプリをそれなりになるまで作ってみようと思います。

VueCliでプロジェクトを作成し、storeフォルダのindex.jsと、viewフォルダの中のAboutView.viewに手を加え練習しました。

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    catName:'ねこ'
  },
  getters: {
  },
  mutations: {
    get(state){
      return state
    }
  },
  actions: {
  },
  modules: {
  }
})

view/AboutView.vue

<template>
  <div class="form">
    <div class="body">
      <div>
        <p class="cname">ねこのなまえ</p>
        <p class="catName">{{catName}}</p>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'catName',
  computed: {
    catName:{
        get(){
          return this.$store.state.catName
        }
    }
  }
}
</script>

とりあえず画面にストアの値を表示することはできました。