npm

Need private packages and team management tools?Check out npm Orgs. »

vuex-promise-middleware

1.0.0 • Public • Published

vuex-promise-middleware

Vuex promise state dispatcher

Installation

$ npm install vuex-promise-middleware

Usage

Add the plugin in the store

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPromiseMiddleware from 'vuex-promise-middleware'
 
Vue.use(Vuex)
 
const plugins = [VuexPromiseMiddleware]
 
export default new Vuex.Store({
  plugins,
  ...
})
 

In your actions make sure to pass a Promise in the payload and the middleware is going to fire two new events with the same name of your event with two suffix: _SUCCEEDED and _FAILED

i.e. GET_STUFF will also fire GET_STUFF_SUCCEEDED and GET_STUFF_FAILED

Example

In this example I will use a public api from https://opentdb.com which retrieves random questions

state.js

export default {
  questions: [],
  pending: false,
  error: null
}

events.js

export default {
  RETRIEVE: 'quiz/RETRIEVE',
  RETRIEVE_SUCCEEDED: 'quiz/RETRIEVE_SUCCEEDED',
  RETRIEVE_FAILED: 'quiz/RETRIEVE_FAILED'
}

actions.js

import axios from 'axios' // for http requests
import events from './events'
 
export default {
  [events.RETRIEVE] ({ commit }) {
    const url = 'https://opentdb.com/api.php?amount=10'
    const request = axios.get(url)
 
    commit(events.RETRIEVE, request)
  }
}
 

mutations.js

import events from './events'
 
export default {
  [events.RETRIEVE] (state) {
    state.pending = true
    state.error = null
  },
 
  [events.RETRIEVE_SUCCEEDED] (state, payload) {
    state.questions = payload.data.results
    state.pending = false
    state.error = null
  },
 
  [events.RETRIEVE_FAILED] (state, payload) {
    state.pending = false
    state.error = payload
    state.questions = []
  }
}
 

Issues and features requests

Please drop an issue, if you find something that doesn't work, or a feature request at https://github.com/MatteoGabriele/vuex-promise-middleware/issues

Follow me on twitter @matteo_gabriele

install

npm i vuex-promise-middleware

Downloadsweekly downloads

23

version

1.0.0

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability