Vuex (Vue.js) integrated as a Feathers Client plugin

npm install feathers-vuex --save

There are three modules included:

1. The Feathers module keeps a list of all services with vuex stores attached.
2. The Service module adds a Vuex store for new services.
3. The Auth module sets up the Vuex store for authentication / logout.

Includes the following state

{
  services: {
    all: {}, // The same as feathersClient.services, keyed by path name.
    vuex: {} // All services that have been integrated into Vuex, keyed by path name
  }
}

Automatically sets up newly-created services into the Vuex store.

An action is included for each of the Feathers service interface methods. These actions will affect changes in both the Feathers API server and the Vuex store.

• find: query an array of records from the server & add to Vuex store
• get: query a single record from the server & add to Vuex store
• create: create one (as an object) or multiple (as an array) records
• update: update (overwrite) a record
• patch: patch (merge in changes) one or more records
• remove: remove/delete the record

Each service that is setup with Vuex will have the following getters:

• find: accepts a params object which allows you to use the Feathers query syntax to query an array of records from the Vuex store.
• get: similar to find, but allows you to query a single record from the Vuex store.

The Auth module helps setup your app for login / logout. It includes the following state by default:

{
  accessToken: undefined
}

The following actions are included in the auth module:

• authenticate: Same as feathersClient.authenticate()
• logout: Same as feathersClient.logout()

You can provide an auth.userService in the feathersVuex options to automatically populate the user upon successful login.

This plugin works perfectly with the feathers-reactive plugin. Realtime events are handled in that plugin, allowing this plugin to stay lean and focused. See the example below for how to add support for Feathers realtime events using feathers-reactive.

Here's an example of a Feathers server that uses feathers-vuex.

const feathers = require('feathers/client');
const socketio = require('feathers-socketio/client');
const auth = require('feathers-authentication-client');
const reactive = require('feathers-reactive')
const RxJS = require('rxjs');
const hooks = require('feathers-hooks');
const feathersVuex = require('feathers-vuex');

// Bring in your Vuex store
const store = require('/path/to/vuex/store');

// Initialize the application
const feathersClient = feathers()
  .configure(rest())
  .configure(hooks())
  .configure(auth())
  .configure(reactive(RxJS))
  // Initialize feathersVuex with the Vuex store
  .configure(feathersVuex(store));

// Automatically setup Vuex with a todos module
app.service('todos')

Copyright (c) 2016

Licensed under the MIT license.