https://github.com/alexandrebonaventure/vuex-jsdata-plugin

A plugin for syncing Vuex store with js-data
https://github.com/alexandrebonaventure/vuex-jsdata-plugin

Last synced: about 2 months ago
JSON representation

A plugin for syncing Vuex store with js-data

• Host: GitHub
• URL: https://github.com/alexandrebonaventure/vuex-jsdata-plugin
• Owner: AlexandreBonaventure
• License: mit
• Created: 2016-10-02T22:44:10.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-08T07:29:24.000Z (over 7 years ago)
• Last Synced: 2024-11-07T07:52:07.102Z (about 2 months ago)
• Language: JavaScript
• Size: 19.5 KB
• Stars: 19
• Watchers: 5
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vuex-jsdata-plugin

A simple attempt to help using jsdata alongside Vue.js:

This plugin syncing Vuex store with js-data

After each injection made by js-data some silent mutations are triggered to ensure vuex store is kept in sync with your ressources (and trigger reactivity).

Read more : https://github.com/js-data/js-data/issues/57

# Dependencies

This plugin is developed for

```

[email protected]

[email protected]

```

You're welcome to contribute to help compatibility issues.

# Usage

With NPM

 ```npm install vuex-plugin-jsdata```

Then when you setup vuex:

```

import jsdataPlugin from 'vuex-plugin-jsdata'

import yourJsDataStore from 'xxxx'

const plugins = [

  jsdataPlugin(yourJsDataStore),

  ... // other plugins

]

new Vuex.Store({

  // state,

  // actions,

  // mutations,

  plugins,

})

```

# How does it work ?

Every change in a js-data ressource are made with the DSInject method.

The plugin manage the state tree(vuex) under a DS module by listening to the afterInject hook (js-data)

## mutation

vuex-plugin-jsdata fire only one silent mutation :

``REFRESH_DATASTORE``

## getters

Although all local ressources injected in the jsdata-store can be found in the vuex store under the namespaced module DS, the plugin provide automatic getters for every model.

Ex:

```

// Register a model in js-data

export const User = store.defineResource({

  name: 'user',

  endpoint: 'users',

})

```

```

// in a .vue component

  import { mapGetters } from 'vuex'

  export default {

    name: 'User',

    props: {

      id: { required: true },

    },

    computed: {

      ...mapGetters(['DSUser']),

      user() {

        return this.DSUser[this.id]

      },

    },

  }

  div.user

    pre {{ user | json }}

```

## global helper

This plugin provide a handy way to make a ressource available inside components.

### mapRessources

mapRessources([

  { nameOfTheGetter: [nameOfTheRessource:string, id_key:string]},

  ...

])

mapRessources is a getter factory designed to get a single record which id is computed from $vm[id_key].

Its really useful for getting specific records dynamicly (eg: get user with id picked from router params)

example:

```

// in store - DSUsers: { 1: { name: 'Alex' } }

// component definition

// using the object spread operator

$vm = {

  data() {

    return {

      user_id: 1

    }

  },

  computed: {

    ...mapRessources([

      { user: ['User', 'user_id'] }

      { userFromRoute: ['User', '$route.params.id'] } // with vue-router

    ]),

  }

}

// Log

$vm.user.name -> 'Alex'

$vm.userFromRoute.name -> 'Alex'

```

# Example

Clone the repo and run

```

npm install

npm run example-simple

=> go to /examples/simple

```

more to come ...

# TO-DO

  [ ] handle config options

  [ ] some examples

# Contributions

are welcome :)