1.0.0 • Published 6 years ago

@mateusz96/vuexapi v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
6 years ago

VuexApi

How to use?

const auth = {
  session: { // default settings
    url: '/session/:id',
    options: {
      method: 'GET',
      headers: {}
    },
    initialState: {},
    prefetch: [],
    postfetch: [],
    crud: false,
    transformer: null,
    withCredentials: false
  },
  logout: {
    url: '/logout',
    prefetch: [({ rootState, api }, cb) => {
      cb() // next fetch
    }],
    postfetch: [({ rootState, api, response}, cb) => {
      api.auth.session.reset(cb)
    }]
  }
}

const vuexApi = VuexApi({
  auth
})

const store = new Vuex.Store({
  plugins: [vuexApi]
})

In component

register VuexApi for form

  const forms = {
    newsletter: {
      url: '/newsletter/:email',
      methods: {
        method: 'POST'
      }
    }
  }

  const user = {
    comment: {
      url: '/comment/:id',
      crud: true
    }
  }

  const vuexApi = VuexApi({
    forms,
    user
  })

  const store = new Vuex.Store({
    plugins: [vuexApi]
  })

use in instance Vue

  export default {
    name: 'VuexApiTest',
    mounted(){
      // allow only with option `crud`
      this.$store.api.user.comment.get({ id: 1 })
      this.$store.api.user.comment.post({ id: 1 })
      this.$store.api.user.comment.put({ id: 1 })
      this.$store.api.user.comment.delete({ id: 1 })
    },
    methods: {
      submitForm(form) { // form is a plain javascript object
        this.$store.api.forms.newsletter({
          email: 'gmail@gmail.com' // email will be replace as query `:email`
        }, form, (err, response) => {}) // callback may be 1st, 2nd or 3rd argument
      }
    }
  }