Feathers-vuex mapActions and mapGetters

Projects.vue

<template>
  <div id="projects">
    <h1>Projects</h1>

    <p>
      Data will be inserted here from the API, or death !
    </p>

    <ul class="mt-5">
      <li
        v-for="project in projects"
        :key="project.id"
      >
        {{ project.id }} = {{ project.name }} ({{ project.companyName }})
      </li>

    </ul>

  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Projects',


  computed: {
  // this mapGetter pulls data from the store (using same query as used by mapAction)
  ...mapGetters('projects', { findProjectsInStore: 'find' }),
    projects () {
      return this.findProjectsInStore({ query: {} }).data // only return the `data` node in the API response
    }
  },
  methods: {
    ...mapActions('projects', { findProjects: 'find' })// pull in the `find` action from the `mapAction` namespace (used to fetch data from the API)
  },
  created () {
    this.findProjects( { query: {} }) // execute `mapAction` above to populate the store with API data
  }

};
</script>