Error in Vuex Computed property was assigned to but it has no setter

Question

I am trying to display a list of Invites to groups.

Sometimes this component displays as expected, and sometimes not at all. This error returns:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Computed property "groupInvites" was assigned to but it has no setter.

found in

---> <InviteList> at src/components/Invites/InviteList.vue
       <UserProfile> at src/views/UserProfile.vue
         <App> at src/components/App.vue
           <Root>

Here is the it component generating the error:

<template>
  <div class="">
    <h4 mt-10 class="text-warning">Your Current Invites:</h4>
    <table class="table">
      <thead>
        <tr>
          <th>Group Name</th>
          <th>Invited By</th>
          <th>Date</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(invite, i) in groupInvites" :key="`${i}-${invite.id} `">
          <td>
            <router-link :to="`/groups/${invite.group_id}`" class="lightbox">
              {{ invite.group_name }}
            </router-link>
          </td>
          <td>{{ invite.sender_id }}</td>
          <td>{{ moment(invite.created_at).strftime("%A, %d %b %Y %l:%M %p") }}</td>
          <td scope="row">
            <a class="btn btn-success mr-3"  @click="acceptInvite(invite)">
              Join Group
            </a>
            <a flat color="grey" @click="deleteInvite(invite.id)">
              <i class="fa fa-trash " ></i>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import moment from 'moment-strftime';
import InvitesService from '../../services/InvitesService';
import UsersService from '../../services/UsersService';

export default {
  name: "InviteList",
  components: {
    // NewInvite
  },
  props: {
    // user: {
    //   type: Object,
    //   required: true
    // },
  },
  computed: {
    user() {
      return this.$store.state.auth.user
    },
    groupInvites() {
      return this.$store.state.invites.groupInvites;
    }
  },
  mounted() {
    this.getInvites();
  },
  methods: {
    async getInvites () {
      console.log('in invitelist, getting invites for user: ', this.user.id)
      this.groupInvites = await this.$store.dispatch("getGroupInvites", this.user);
    },
    async getUser (id) {
      this.sender = await UsersService.getUserById({
        id: id
      });
    },
    deleteInvite: async function (id) {
      if(confirm("Do you really want to reject this invite?")) {
        let response = await InvitesService.deleteInvite(id)
        if (response.status === 200) {
          console.log('In Invite.vue, invite deleted, about to emit');
          this.$emit('invite-deleted');
        }
      }
      this.getInvites();
    },
    async acceptInvite(invite) {
      let result = await InvitesService.acceptInvite(invite.invitation_code)
      this.$emit("membership-created");
      console.log('this is the membership created: ', result.data)
      // window.analytics.track('Group Joined', {
      //   title: this.group.name,
      //   user: this.$store.getters.user.username
      // });
      this.getInvites();
    },
    moment: function (datetime) {
      return moment(datetime);
    }
  }
};
</script>

Separately, here is the store module:

import InvitesService from '@/services/InvitesService'

export const state = {
  groupInvites: []
}

export const mutations = {
  setGroupInvites(state, groupInvites) {
    state.groupInvites = groupInvites;
  }
} 

export const actions = {
  getGroupInvites({ commit }, user) {
    console.log('in store. getting invites, for user: ', user.id)
    InvitesService.getAllUserInvitation(user.id)
      .then(resp => {
        console.log('in store, getGroupInvites,this is groupInvites: ', resp.data);
        commit('setGroupInvites', resp.data);
      });
  }
}

export const getters = {

}

Incidentally, getGroupInvites is being called twice. here are the console.logs:

in invitelist, getting invites for user:  9
invites.js?d00b:16 in store. getting invites, for user:  9
InvitesService.js?109c:10 in service getting all user invites for user:  9
invites.js?d00b:16 in store. getting invites, for user:  undefined
InvitesService.js?109c:10 in service getting all user invites for user:  undefined

notice user is undefined on the second go around.

Dan Dan · Accepted Answer · 2020-04-21T17:48:56

It is possible to assign a value to a computed if you've defined it using a computed setter, but you haven't and probably don't need to. So this line is wrong and throws the error because it tries to do that:

this.groupInvites = await this.$store.dispatch("getGroupInvites", this.user);

But it's ok because this.groupInvites already gets its value reactively from the same state that getGroupInvites action populates anyway (state.groupInvites) so it's also unnecessary. Change that line to:

this.$store.dispatch("getGroupInvites", this.user);

and allow the computed to update itself.

Error in Vuex Computed property was assigned to but it has no setter

1 Answers