Json:Api for Vuex

Automagic Json:Api integration for Vuex

This is the documentation for @efrane/vuex-json-api which makes working with a Json:Api (opens new window) from Vuex (opens new window) a magical experience.

Quick Setup

In your entrypoint do something like:

import { createApp } from 'vue'
import { createStore } from 'vuex'

import {
  Api,
  StaticRouter
} from '@efrane/vuex-json-api'

import PlaygroundRoutes from '@efrane/vuex-json-api/misc/JsonApiPlaygroundRoutes'

Api.setBaseUrl('https://jsonapiplayground.reyesoft.com')

const router = new StaticRouter(PlaygroundRoutes)

const storeOptions = {} // your store options

const store = createStore(storeOptions, router)
  .then(store => {
    const app = createApp(store, { App })

    app.use(store)
    app.mount('#app')
  })

Then, in App.vue:

{
  // ...
  computed: {
    ...mapState('books', {
      books: state => state.items
    })
  },

  methods: {
    ...mapActions('books', ['list'])
  },

  mounted () {
    this.list()
  }
  // ...
}

  <ul>
    <li v-for="book in books">{{ book.attributes.title }}</li>
  </ul>