Ошибка в Vuex Computed свойство было назначено, но оно не имеет установщика - PullRequest
Новая
       60

Ошибка в Vuex Computed свойство было назначено, но оно не имеет установщика

0 голосов
/ 21 апреля 2020

Я пытаюсь отобразить список приглашений в группы.

Иногда этот компонент отображается так, как ожидалось, а иногда нет вообще. Возвращает эту ошибку: 

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>

Вот компонент it, генерирующий ошибку: 

<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>

Отдельно находится модуль хранилища: 

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 = {

}

Кстати, getGroupInvites вызывается дважды. вот 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

уведомление, что пользователь не определен во втором go вокруг.

1 Ответ

0 голосов
/ 21 апреля 2020

Можно присвоить вычисляемое значение, если вы определили его с помощью вычисляемого установщика , но у вас его нет и, вероятно, нет необходимости. Таким образом, эта строка неверна и выдает ошибку, потому что пытается это сделать: 

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

Но это нормально, потому что this.groupInvites уже получает свое значение реактивно из того же состояния, что действие getGroupInvites заполняет в любом случае (state.groupInvites) так что это тоже не нужно. Измените эту строку на: 

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

и разрешите вычисляемому обновляться.

...