A Helper utility to simplify the usage of REST APIs with Vuex 2. Uses the popular HTTP client axios for requests. Works with websanova/vue-auth.
If you want to connect a REST API with Vuex you'll find that there are a few repetitive steps. You need to request the data from the api (with an action) and set the state (via a mutation). This utility (for the sake of brevity called Vapi
in the README) helps in creating the store by setting up the state, mutations and actions with a easy to follow pattern.
It's just a helper utility to help prepraring the store object for you. If there's something you don't like just overwrite the property.
npm install vuex-rest-api
Some notes: This readme assumes that you're using at least ES2015.
- Import
vuex-rest-api
(I called itVapi
). - Create a
Vapi
instance.
At least you have to set the base URL of the API you're requesting from. You can also define the default state. If you don't define a default state from a property it will default tonull
. In the example - Create the actions.
Each action represents a Vuex action. If it will be called (propertyaction
), it requests a specific API endpoint (propertypath
) and sets the related property namedproperty
to the response's payload. - Create the store object
- Pass it to Vuex. Continue reading here to know how to call the actions.
// store.js
import Vuex from "vuex"
import Vue from "vue"
// Step 1
import Vapi from "vuex-rest-api"
Vue.use(Vuex)
// Step 2
const posts = new Vapi({
baseURL: "https://jsonplaceholder.typicode.com",
state: {
posts: []
}
})
// Step 3
.get({
action: "getPost",
property: "post",
path: ({ id }) => `/posts/${id}`
})
.get({
action: "listPosts",
property: "posts",
path: "/posts"
})
.post({
action: "updatePost",
property: "post",
path: ({ id }) => `/posts/${id}`
})
// Step 4
.getStore()
// Step 5
export const store = new Vuex.Store(posts)
Yep, here: https://codesandbox.io/s/8l0m8qk0q0
The docs are now available under https://vuex-rest-api.org