title: Feathersjs-Vuex: how to update a vuex state from sql query
body: <p>For a background to this question, i recommend read the thread below:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/60021983/vuex-update-state">vuex-update-state</a></li>
  </ul>
  <p>I will show the contexts of my question in backend and frontend sides:</p>
  <h3>Backend</h3>
  <ul>
  <li>a feathersjs server;</li>
  <li>the server has 3 services: users, grades and students;</li>
  <li>the database adapter used is <a href="https://sequelize.org/master/manual/eager-loading.html" rel="nofollow noreferrer">sequelize</a> for a postgresql database.</li>
  </ul>
  <h3>Frontend</h3>
  <ol>
  <li>A server side rendering build in nuxt with vuetify;</li>
  <li>A <a href="https://vuex.feathersjs.com/service-plugin.html#setup" rel="nofollow noreferrer">feathersjs-vuex</a> to manage states</li>
  <li>the '/profile' page (frontend) request for an authenticated user ('/users' in backend)</li>
  <li>the '/grades' page (frontend) request a query for all grades that belongs to the authenticated user ('/grades' in backend)</li>
  <li>the '/students' page (frontend) request a query for all students that belongs to any grades of an authenticated user ('/students' in backend)</li>
  </ol>
  <p>So, my specific question is about the item 5 of frontend context. With the following code, I can retrieve <em>&quot;all students that belongs to any grades of an authenticated user&quot;</em>, but the computed property <code>students</code> return an empty array:</p>
  <pre><code>&lt;script&gt;
  import { mapState, mapGetters, mapActions } from 'vuex'
  
  export default {
    computed: {
      ...mapState('students', { areStudentsLoading: 'isFindPending' }),
      ...mapGetters('students', { findStudentsInStore: 'find' }),
      query () {
        return {
          query: {
            $sort: {
              first_name: 1,
              last_name: 1
            },
            $select: ['first_name', 'last_name'],
            include: [{
              model: 'grades',
              where: {
                userUuid: this.$store.state.auth.user.uuid
              }
            }]
          }
        }
      },
      computed () {
        return this.findStudentsInStore(this.query).data
      }
    },
    created () {
      this.findStudents(this.query)
    },
    methods: {
      ...mapActions('students', { findStudents: 'find' })
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>So, the <code>findStudents</code> is a AJAX request, and in the <a href="https://stackoverflow.com/questions/60021983/vuex-update-state">commented thread</a> someone reply:</p>
  <blockquote>
  <p>Axios (and AJAX in general) is asynchronous which means that the operation begins separately from the normal synchronous flow of code. After it begins, program execution immediately resumes, often before the async operation is complete. At the time you are logging to the console, there is no guarantee that this async promise is resolved yet.</p>
  </blockquote>
  <blockquote>
  <p>As an aside, there is no need for that getter, which you can think of as a computed that isn't computing anything.</p>
  </blockquote>
  <p>So i tested the following code, where i substituted the computed property <em>students</em> for a <em>student data</em>, and it worked:</p>
  <pre><code>&lt;script&gt;
  import { mapActions } from 'vuex'
  
  export default {
    computed: {
      query () {
        return {
          query: {
            $sort: {
              first_name: 1,
              last_name: 1
            },
            $select: ['first_name', 'last_name'],
            include: [{
              model: 'grades',
              where: {
                userUuid: this.$store.state.auth.user.uuid
              }
            }]
          }
        }
      }
    },
    data () {
      return { students: [] }
    },
    created () {
      this.findStudents(this.query).then((response) =&gt; {
        this.students = response.data
      })
    },
    methods: {
      ...mapActions('students', { findStudents: 'find' })
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>So, my question is: there is a way to update the state os students in store or i should rely on the last approach?</p>