FeathersVuex

# 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 (opens new window) 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.

# New extend option for makeServicePlugin 3.9.0+

The makeServicePlugin now supports an extend method that allows customizing the store and gives access to the actual Vuex store object, as shown in this example:

import { makeServicePlugin } from ‘feathers-vuex’
import { feathersClient } from ‘./feathers-client.js’

class Todo { /* truncated */ }

export default makeServicePlugin({
  Model: Todo,
  service: feathersClient.service(‘todos’),
  extend({ store, module }) {
    // Listen to other parts of the store
    store.watch(/* truncated */)

    return {
      state: {},
      getters: {},
      mutations: {},
      actions: {}
    }
  }
})

# Partial data on patch 3.9.0+

As of version 3.9.0, you can provide an object as params.data, and Feathers-Vuex will use params.data as the patch data. This change was made to the service-module, itself, so it will work for patch across all of feathers-vuex. Here's an example of patching with partial data:

import { models } from 'feathers-vuex'
const { Todo } = models.api

const todo = new Todo({ description: 'Do Something', isComplete: false })

todo.patch({ data: { isComplete: true } })

// also works for patching with instance.save
todo.save({ data: { isComplete: true } })

# FeathersVuexPagination Component 3.8.0+

To assist with Server Side Pagination support, Feathers-Vuex now includes the <FeathersVuexPagination> component. It's a renderless component that removes the boilerplate behind handling pagination in the UI. Read about it in the Composition API Docs.

# Custom Handling for Feathers Events 3.1.0+

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.

# Breaking Changes

Feathers-Vuex follows semantic versioning. There are two breaking changes in this release:

# Auth Plugin user Not Reactive New API in 3.2.0+

Due to changes in how reactivity is applied to service state (it's now using Vue.set under the hood), the user state of the auth module is no longer reactive. To fix this issue, two getters have been added to the auth state. They are available when a userService is provided to the makeAuthPlugin options.

  • user: returns the reactive, logged-in user from the userService specified in the options.
  • isAuthenticated: a easy to remember boolean attribute for if the user is logged in.

If you depend on a reactive, logged-in user in your apps, here is how to fix the reactivity:

  • Replace any reference to store.state.auth.user with store.getters['auth/user'].

Because the user state is no longer reactive, it is logical for it to be removed in the next version. It will likely be replaced by a userId attribute in Feathers-Vuex 4.0.

# Server-Side Pagination Support is Off by Default

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

This behavior exactly matches the new useFind utility.

# Deprecations

# The keepCopiesInStore Option deprecated

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.

# Auth Plugin State: user deprecated

As described, earlier on this page, since the Auth Plugin's user state is no longer reactive and has been replaced by a user getter that IS reactive, the user state will be removed in the Feathers-Vuex 4.0.

# Renderless Data Components: query, fetchQuery and temps <Badge text="deprecated type="warning">

To keep consistency with mixins and the composition API it's preferred to use params and fetchParams instead of the old query and fetchQuery for renderless data components. Also the :temps="true" is deprecated in favour of :params="{ query: {}, temps: true }". This way additional params can be passed to the server if you need some more magic like $populateParams.

← Getting Started →