ember 错误 this.store.findAll 不是 function

Question

hey all im going through the emberjs tutorial and i've run into this issue that i'm unable to resolve. when i try to call the findAll function from store it throws a typeerror and says that findAll is not a function. when i use The this.get() method it says itss a classic ember object method, and can't be used in octane classes. does anybody have any idea how to fix this?

thanks in advance for your time!

app/route/rental.js

import Route from '@ember/routing/route';

export default class RentalsRoute extends Route {
  model() {
    return this.store.findAll('rental');
  }
}

app/models/rental.js

import Model, { attr } from '@ember-data/model';

export default class RentalModel extends Model {
  @attr title;
  @attr owner;
  @attr city;
  @attr propertyType;
  @attr image;
  @attr bedrooms;
  @attr description;
}

mirage/config.js

export default function () {
  this.namespace = '/api';

  this.get('/rentals', function () {
    return {
      data: [
        {
          type: 'rentals',
          id: 'grand-old-mansion',
          attributes: {
            title: 'Grand Old Mansion',
            owner: 'Veruca Salt',
            city: 'San Francisco',
            'property-type': 'Estate',
            bedrooms: 15,
            image:
              'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
          },
        },
        {
          type: 'rentals',
          id: 'urban-living',
          attributes: {
            title: 'Urban Living',
            owner: 'Mike Teavee',
            city: 'Seattle',
            'property-type': 'Condo',
            bedrooms: 1,
            image:
              'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
          },
        },
        {
          type: 'rentals',
          id: 'downtown-charm',
          attributes: {
            title: 'Downtown Charm',
            owner: 'Violet Beauregarde',
            city: 'Portland',
            'property-type': 'Apartment',
            bedrooms: 3,
            image:
              'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg',
          },
        },
      ],
    };
  });
}

Answer 1

The reason why you see it is that starting from the v4 Ember doesn't allow some implicit service injections which were there up recently. The store injection in routes was one of them. It was first added as a deprecation in 3.26 but now as of v4 it's removed and apparently they haven't updated the documentation.

What you should do is to inject it explicitly, ie in your app/route/rental.js make

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class RentalsRoute extends Route {
  @service store;

  model() {
    return this.store.findAll('rental');
  }
}