ndabAP

Vuex microservice

Define microservice URLs at a dedicated place and use them inside your Vuex actions.

Version Version: 1.0.5 Version Updated: 08/15/2019 By: ndabAP License: MIT

DownloadsLast30Days: 11

https://github.com/ndabAP/vuex-microservice

npm i vuex-microservice
yarn add vuex-microservice

vuex-microservice

Define microservice URLs at a dedicated place and use them inside your Vuex actions.

Warning: This plugin uses JavaScript's Symbol. It's possible that your target browser is not supported.

Features

  • One place for your microservice URL
  • changes have to be applied only once

Installation

$ npm install --save-dev vuex-microservice

Usage

Prerequisites

The plugin uses decorators and Babel. Therefore, you need Babel and a Babel plugin to transpile them into native JavaScript.

$ npm install --save-dev babel-plugin-transform-decorators-legacy

Now add the Plugin to your .babelrc.

{
    "plugins": ["transform-decorators-legacy"]
}

Store

First, add the plugin to your Vuex instance. Second, pass the microservice URL as the first argument and the namespace where it's used as the second argument.

import { plugin } from 'vuex-microservice'

export default new Vuex.Store({
  plugins: [plugin('http://microservice', 'nested/module')]
  // ... Nested module setup
})

Now use the handy decorator to retrieve the microservice URL inside your actions.

import { decorator } from 'vuex-decorator'

export default {
  @decorator('/api/data', 'nested/module')
  action ({state}) {
    const url = state[Symbol.for('nested/module')]
    assert.equal('http://microservice/api/data', url)
  }
}

Author

Julian Claus and contributors.

License

MIT

Tags: