Vuex Computed 属性 中的错误已分配给但它没有 setter

Question

我正在尝试显示群组邀请列表。

有时此组件会按预期显示，有时根本不会显示。这个错误 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>

这里是产生错误的 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

注意用户在第二次运行时未定义。

Answer 1

如果您使用 computed setter 定义了计算值，则可以为它分配一个值，但您没有也可能不需要这样做。所以这一行是错误的并抛出错误，因为它试图这样做：

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

但这没关系，因为 this.groupInvites 已经从 getGroupInvites 操作填充的相同状态（state.groupInvites）中反应性地获取了它的值，所以它也没有必要。将该行更改为：

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

并允许计算器自行更新。