|
1 | 1 | # feathers-vuex
|
2 | 2 |
|
3 |
| -[](https://travis-ci.org/feathers-plus/feathers-vuex) |
4 |
| -[](https://david-dm.org/feathers-plus/feathers-vuex) |
| 3 | +[](https://travis-ci.org/feathers-plus/feathers-vuex) |
| 4 | +[](https://david-dm.org/feathers-plus/feathers-vuex) |
5 | 5 | [](https://www.npmjs.com/package/feathers-vuex)
|
6 | 6 |
|
7 | 7 | 
|
|
10 | 10 |
|
11 | 11 | `feathers-vuex` is a first class integration of the Feathers Client and Vuex. It implements many Redux best practices under the hood, eliminates *a lot* of boilerplate code, and still allows you to easily customize the Vuex store.
|
12 | 12 |
|
13 |
| - |
14 |
| -___________________________________ |
15 |
| - |
16 |
| -> NOTICE: this module is almost (but not quite) fully compatible with Feathers V4. The authentication module is written for Feathers V3. If you're going to use Feathers V4, please search the [GitHub issues](https://github.com/feathers-plus/feathers-vuex/issues) for "feathers crow authentication" for workarounds you can implement until this module is properly updated. |
17 |
| -> |
18 |
| -> IN THE MEANTIME, it is highly recommended that you use the [pre-release version](https://github.com/feathers-plus/feathers-vuex/pull/216), which is production ready for Feathers V4. A proper migration guide and updated documentation are currently in progress. |
19 |
| -
|
20 |
| -___________________________________ |
21 |
| - |
22 |
| - |
23 |
| - |
24 |
| -## Features |
25 |
| - |
26 |
| -- Fully powered by Vuex & Feathers |
27 |
| -- Realtime By Default |
28 |
| -- Actions With Reactive Data |
29 |
| -- Local Queries |
30 |
| -- Fall-Through Caching |
31 |
| -- Feathers Query Syntax |
32 |
| -- $FeathersVuex Vue Plugin |
33 |
| -- Live Queries |
34 |
| -- Per-Service Data Modeling |
35 |
| -- Clone & Commit |
36 |
| -- Vuex Strict Mode |
37 |
| -- Per-Record Defaults |
38 |
| -- Data Level Computes |
39 |
| -- Relation Support |
40 |
| - |
41 | 13 | ## Demo & Documentation
|
42 | 14 |
|
43 | 15 | [Demo](https://codesandbox.io/s/xk52mqm7o)
|
44 | 16 |
|
45 |
| -See [https://feathers-vuex.feathers-plus.com/index.html](https://feathers-vuex.feathers-plus.com/index.html) for full documentation. |
| 17 | +See [https://feathers-vuex.netlify.com/index.html](https://feathers-vuex.netlify.com) for full documentation. |
46 | 18 |
|
47 | 19 | ## Installation
|
48 | 20 |
|
49 | 21 | ```bash
|
50 | 22 | npm install feathers-vuex --save
|
51 | 23 | ```
|
52 | 24 |
|
53 |
| -## Basic Examples |
54 |
| - |
55 |
| -To setup `feathers-vuex`, we first need to setup a Feathers Client. Here's an example using the latest `@feathersjs` npm packages. |
56 |
| - |
57 |
| -**feathers-client.js:** |
58 |
| - |
59 |
| -```js |
60 |
| -import feathers from '@feathersjs/feathers' |
61 |
| -import socketio from '@feathersjs/socketio-client' |
62 |
| -import auth from '@feathersjs/authentication-client' |
63 |
| -import io from 'socket.io-client' |
64 |
| - |
65 |
| -const socket = io('http://localhost:3030', {transports: ['websocket']}) |
66 |
| - |
67 |
| -const feathersClient = feathers() |
68 |
| - .configure(socketio(socket)) |
69 |
| - .configure(auth({ storage: window.localStorage })) |
70 |
| - |
71 |
| -export default feathersClient |
| 25 | +```bash |
| 26 | +yarn add feathers-vuex |
72 | 27 | ```
|
73 | 28 |
|
74 |
| -And here's how you would integrate the Feathers Client into the Vuex store: |
75 |
| - |
76 |
| -**store/index.js:** |
77 |
| - |
78 |
| -```js |
79 |
| -import Vue from 'vue' |
80 |
| -import Vuex from 'vuex' |
81 |
| -import feathersVuex from 'feathers-vuex' |
82 |
| -import feathersClient from '../feathers-client' |
83 |
| - |
84 |
| -const { service, auth, FeathersVuex } = feathersVuex(feathersClient, { idField: '_id' }) |
85 |
| - |
86 |
| -Vue.use(Vuex) |
87 |
| -Vue.use(FeathersVuex) |
88 |
| - |
89 |
| -export default new Vuex.Store({ |
90 |
| - plugins: [ |
91 |
| - service('todos'), |
92 |
| - |
93 |
| - // Specify custom options per service |
94 |
| - service('/v1/tasks', { |
95 |
| - idField: '_id', // The field in each record that will contain the id |
96 |
| - nameStyle: 'path', // Use the full service path as the Vuex module name, instead of just the last section |
97 |
| - namespace: 'custom-namespace', // Customize the Vuex module name. Overrides nameStyle. |
98 |
| - autoRemove: true, // Automatically remove records missing from responses (only use with feathers-rest) |
99 |
| - enableEvents: false, // Turn off socket event listeners. It's true by default |
100 |
| - addOnUpsert: true, // Add new records pushed by 'updated/patched' socketio events into store, instead of discarding them. It's false by default |
101 |
| - skipRequestIfExists: true, // For get action, if the record already exists in store, skip the remote request. It's false by default |
102 |
| - modelName: 'OldTask' // Default modelName would have been 'Task' |
103 |
| - }) |
104 |
| - |
105 |
| - // Add custom state, getters, mutations, or actions, if needed. See example in another section, below. |
106 |
| - service('things', { |
107 |
| - state: {}, |
108 |
| - getters: {}, |
109 |
| - mutations: {}, |
110 |
| - actions: {} |
111 |
| - }) |
112 |
| - |
113 |
| - // Setup a service with defaults for Model instances |
114 |
| - service('manufacturers', { |
115 |
| - instanceDefaults: { |
116 |
| - name: '' |
117 |
| - } |
118 |
| - }) |
119 |
| - // Setup a service with light-weight relational data |
120 |
| - service('models', { |
121 |
| - instanceDefaults: { |
122 |
| - name: '', |
123 |
| - manufacturerId: '', |
124 |
| - manufacturer: 'Manufacturer' // Refers to data (populated on the server) that gets put in the `manufacturers` vuex store. |
125 |
| - } |
126 |
| - }) |
127 |
| - |
128 |
| - // Setup the auth plugin. |
129 |
| - auth({ userService: 'users' }) |
130 |
| - ] |
131 |
| -}) |
132 |
| -``` |
| 29 | +IMPORTANT: Feathers-Vuex is (and requires to be) published in ES6 format for full compatibility with JS classes. If your project uses Babel, it must be configured properly. See the [Project Configuration](#projectconfiguration) section for more information. |
133 | 30 |
|
134 | 31 | ## Contributing
|
135 | 32 |
|
136 |
| -`feathers-vuex` tests run using StealJS, which is a 100% browser-based bundler. |
137 |
| - |
138 |
| -Once you’ve installed all of the npm packages, start an `http-server` in the root folder: |
139 |
| - |
140 |
| -`cd feathers-vuex` |
141 |
| - |
142 |
| -`npm i -g http-server` |
143 |
| - |
144 |
| -`http-server` |
145 |
| - |
146 |
| -Then open the resulting page in your browser and navigate to the test folder to run the tests. |
| 33 | +This repo is pre-configured to work with the Visual Studio Code debugger. After running `yarn install`, use the "Mocha Tests" debug script for a smooth debugging experience. |
147 | 34 |
|
148 | 35 | ## License
|
149 | 36 |
|
|
0 commit comments