|
1 | 1 | # feathers-vuex |
2 | 2 |
|
| 3 | +<<<<<<< HEAD |
3 | 4 | [](https://travis-ci.org/feathers-plus/feathers-vuex) |
4 | 5 | [](https://david-dm.org/feathers-plus/feathers-vuex) |
5 | 6 | [](https://www.npmjs.com/package/feathers-vuex) [](https://greenkeeper.io/) |
| 7 | +======= |
| 8 | +[](https://travis-ci.org/feathersjs-ecosystem/feathers-vuex) |
| 9 | +[](https://david-dm.org/feathersjs-ecosystem/feathers-vuex) |
| 10 | +[](https://www.npmjs.com/package/feathers-vuex) |
| 11 | + |
| 12 | +> > > > > > > master |
6 | 13 |
|
7 | 14 |  |
8 | 15 |
|
9 | 16 | > Integrate the Feathers Client into Vuex |
10 | 17 |
|
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 | | - |
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 |
| 18 | +`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. |
40 | 19 |
|
41 | 20 | ## Demo & Documentation |
42 | 21 |
|
43 | 22 | [Demo](https://codesandbox.io/s/xk52mqm7o) |
44 | 23 |
|
45 | | -See [https://feathers-vuex.feathers-plus.com/index.html](https://feathers-vuex.feathers-plus.com/index.html) for full documentation. |
| 24 | +See [https://vuex.feathersjs.com](https://vuex.feathersjs.com) for full documentation. |
46 | 25 |
|
47 | 26 | ## Installation |
48 | 27 |
|
49 | 28 | ```bash |
50 | 29 | npm install feathers-vuex --save |
51 | 30 | ``` |
52 | 31 |
|
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 |
| 32 | +```bash |
| 33 | +yarn add feathers-vuex |
72 | 34 | ``` |
73 | 35 |
|
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 | | -``` |
| 36 | +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](https://vuex.feathersjs.com/api-overview.html#project-configuration) section for more information. |
133 | 37 |
|
134 | 38 | ## Contributing |
135 | 39 |
|
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. |
| 40 | +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 | 41 |
|
148 | 42 | ## License |
149 | 43 |
|
150 | 44 | Copyright (c) Forever and Ever, or at least the current year. |
151 | 45 |
|
152 | | -Licensed under the [MIT license](https://github.com/feathers-plus/feathers-vuex/blob/master/LICENSE). |
| 46 | +Licensed under the [MIT license](https://github.com/feathersjs-ecosystem/feathers-vuex/blob/master/LICENSE). |
0 commit comments