Fix error with shared state between models.

A bug was causing shared copiesById state between all of the models, so cloning a model would cause it to receive properties from another model. This release assures that each Model class has its own copiesById property. In the TypeScript definition, the copiesById attribute on the BaseModel is now an abstract property, so it has to be defined on TypeScript classes.

🎁 Vue Composition API & better Realtime Defaults

What's new in Feathers-Vuex 3.0

Vue Composition API Support

Version 3.0 of Feathers-Vuex is the Vue Composition API release! There were quite a few disappointed (and misinformed:) developers in 2019 when the Vue.js team announced what is now called the Vue Composition API. From my perspective:

• It is the most powerful feature added to Vue since its first release.
• It improves the ability to create dynamic functionality in components.
• It greatly enhances organization of code in components.
• It encourages code re-use. Check out the vue-use-web collection for some great examples.

And now it has become the best way to perform queries with Feathers-Vuex. To find out how to take advantage of the new functionality in your apps, read the Feather-Vuex Composition API docs.

Custom Handling for Feathers Events

Version 3.1 of Feathers-Vuex enables ability to add custom handling for each of the FeathersJS realtime events. You can read more about it in the Service Plugin: Events docs.

A Single Breaking Change

Since Feathers-Vuex follows semantic versioning, a single, small breaking change is the reason for the major version bump. Feathers-Vuex 3.0 has only one breaking change:

The makeFindMixin (and the new useFind utility) now have server-side pagination support turned off, by default. Real-time arrays of results are now the default setting. This really improves the development experience, especially for new users.

To migrate your app to version 3.0, you need to update any params where you are using server-side pagination. It will work as it has been in version 2.0 once you explicitly set paginate: true in the params, like this:

import { makeFindMixin } from 'feathers-vuex'

export default {
  name: 'MyComponent',
  mixins: [ makeFindMixin({ service: 'users', watch: true })],
  computed: {
    usersParams() {
      return {
        query: {},
        paginate: true // explicitly enable pagination, now.
      }
    }
  }
}

That's the only breaking change in this release. This behavior exactly matches the new useFind utility.

One Deprecation

The keepCopiesInStore option is now deprecated. This was a part of the "clone and commit" API which basically disabled the reason for creating the "clone and commit" API in the first place.

If you're not familiar with the Feathers-Vuex "clone and commit" API, you can learn more about the built-in data modeling API and the section about Working with Forms.

The keepCopiesInStore feature is set to be removed in Feathers-Vuex 4.0.

Export the FeathersVuexFormWrapper

The FeathersVuexFormWrapper is now included in the main exports so you can do

import { FeathersVuexFormWrapper } from 'feathers-vuex'

Model classes are now EventEmitters

Model classes are now EventEmitter instances which emit service events when received (technically, EventEmitter methods are mixed onto each Model class). All FeathersJS events are supported. Oh, and one more thing: it works with feathers-rest (you won't receive socket events, but you can listen for when instances are created in other parts of the app.)

Here’s an example of how to use it in a component:

export default {
   created() {
      this.$FeathersVuex.api.Todo.on(‘created’, this.handleTodoCreated)
   },
   destroyed() {
      this.$FeathersVuex.api.Todo.off(‘created’, this.handleTodoCreated)
   },
   methods: {
      handleTodoCreated(todo) {
         console.log(todo)
      }
   }
}

Since they have all of the EventEmitter methods, Model classes can be used as a data-layer Event Bus. You can even use custom methods:

const { Todo } = this.$FeathersVuex.api

Todo.on('custom-event', data => {
  console.log(data) // { test: true }
})

Todo.emit('custom-event', { test: true })

See code changes in this commit: 5224d5d

Use Vue.set for adding items to state.keyedById in the `addItems` mutation

This modifies the service plugin’s addItems mutation to prevent overwriting all of keyedById and tempsById. When queries are made using data derived from the store, since the addItems mutation was overwriting the entire keyedById object, the query would run again. These infinite loops were running even if you used a computed property as a go-between to cache the parts of the query derived from the store.

In scenarios where the query uses data derived from the store and then updates the store when results arrive, this change allows using a computed property to properly cache and prevent infinite loops.

fix error when paramsToUse is null in makeFindMixin

With the makeFindMixin, the user is allowed to pass null as the params in order to prevent a query from being made. An error would occur when returning null as the fetchParams. This guards against trying to set an attribute on null.

Add first-load tracking attributes to `makeGetMixin`

The makeFindMixin already included data for first-load tracking. For example, a videos service has two boolean attributes: haveVideosBeenRequestedOnce and haveVideosLoadedOnce. This adds feature parity for the makeGetMixin and adds the following attributes:

• has${capitalizedResource}BeenRequestedOnce
• has${capitalizedResource}LoadedOnce

These attributes can now be used to track first-load scenarios in the makeGetMixin.

Fix the rest of the clone mutations

Builds on the previous release to fix the other mutations around clone and commit.

Better check for temp records in resetCopy mutation

fix check for temp record

Checking for the presence of the idField on a record is a better indicator of if the record is a temp. It beats checking for the lack of an __id field, because in Vue it’s sometimes a pain in the butt to get rid of properties thanks to using getters and setters for reactivity. This won’t be necessary once 3.0 ships with proxy-based reactivity.

This fixes an error that would sometimes occur if the original record cannot be found because it still contains an __isTemp property.

Custom tsconfig for tests

It turns out that allowJs tsconfig option was being used for testing. Tests now use their own config. This didn't need a release, really, but again: sometimes I don't npm that well. Especially when npming while tired.