羽毛-vuex (feathers-vuex)

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.

feathers-vuex是Feathers Client和Vuex的一流集成。 它在后台实现了许多Redux最佳实践，消除了很多样板代码，并且仍然允许您轻松自定义Vuex存储。

特征 (Features)

• Fully powered by Vuex & Feathers

  由Vuex＆Feathers完全提供动力

• Realtime By Default

  默认为实时

• Actions With Reactive Data

  React性数据的操作

• Local Queries

  本地查询

• Fall-Through Caching

  直通缓存

• Feathers Query Syntax

  羽毛查询语法

• $FeathersVuex Vue Plugin

  $ FeathersVuex Vue插件

• Live Queries

  实时查询

• Per-Service Data Modeling

  每服务数据建模

• Clone & Commit

  克隆并提交

• Vuex Strict Mode

  Vuex严格模式

• Per-Record Defaults

  每个记录的默认值

• Data Level Computes

  数据级计算

• Relation Support

  关系支持

安装 (Installation)

npm install feathers-vuex --save

基本范例 (Basic Examples)

To setup feathers-vuex, we first need to setup a Feathers Client. Here's an example using the latest @feathersjs npm packages.

要设置feathers-vuex ，我们首先需要设置Feathers Client。 这是使用最新的@feathersjs npm软件包的示例。

feathers-client.js:

feathers-client.js：

import feathers from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'
import auth from '@feathersjs/authentication-client'
import io from 'socket.io-client'const socket = io('http://localhost:3030', {transports: ['websocket']})const feathersClient = feathers().configure(socketio(socket)).configure(auth({ storage: window.localStorage }))export default feathersClient

And here's how you would integrate the Feathers Client into the Vuex store:

这是将Feathers Client集成到Vuex商店中的方法：

store/index.js:

store / index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import feathersVuex from 'feathers-vuex'
import feathersClient from '../feathers-client'const { service, auth, FeathersVuex } = feathersVuex(feathersClient, { idField: '_id' })Vue.use(Vuex)
Vue.use(FeathersVuex)export default new Vuex.Store({plugins: [service('todos'),// Specify custom options per serviceservice('/v1/tasks', {idField: '_id', // The field in each record that will contain the idnameStyle: 'path', // Use the full service path as the Vuex module name, instead of just the last sectionnamespace: 'custom-namespace', // Customize the Vuex module name.  Overrides nameStyle.autoRemove: true, // Automatically remove records missing from responses (only use with feathers-rest)enableEvents: false, // Turn off socket event listeners. It's true by defaultaddOnUpsert: true, // Add new records pushed by 'updated/patched' socketio events into store, instead of discarding them. It's false by defaultskipRequestIfExists: true, // For get action, if the record already exists in store, skip the remote request. It's false by defaultmodelName: 'OldTask' // Default modelName would have been 'Task'})// Add custom state, getters, mutations, or actions, if needed.  See example in another section, below.service('things', {state: {},getters: {},mutations: {},actions: {}})// Setup a service with defaults for Model instancesservice('manufacturers', {instanceDefaults: {name: ''}})// Setup a service with light-weight relational dataservice('models', {instanceDefaults: {name: '',manufacturerId: '',manufacturer: 'Manufacturer' // Refers to data (populated on the server) that gets put in the `manufacturers` vuex store.}})// Setup the auth plugin.auth({ userService: 'users' })]
})

翻译自: https://vuejsexamples.com/integrate-the-feathers-client-into-vuex/