Index

• Usage
  • Download & Installation
  • Vuex State
    • submitting
  • Vuex Actions
    • attach
    • destroy
  • Vuex Mutations
    • attachResponse
• License

Usage

Download & Installation

$ npm i tuxedo-api-interface

In your Vue main.js file, or wherever you're calling the Vuex store

import { tuxedo } from 'tuxedo-api-interface/src/module/tuxedo'

export default new Vuex.Store({
    modules: {
        tuxedo
    }
})

In the script part of any component you wish to use these tools in

import { mapState } from 'vuex'
import { resourceControl } from 'tuxedo-api-interface/src/mixins/resourceControl'

export default {
    name: 'Users',
    mixins: [resourceControl],
    computed: {
        ...mapState({
            resources: state => state.users,
            resourceState: state => state.usersState,
            resourceStore: state => state.usersStore
        })
    }
}

Your Vuex state requires a couple of object variables for each component, the naming of these variables is based on what you have named your component.

export const state = {
    // This contains the active collection of the resource
    users: {},
    // Optional, this contains the entire collection of resources
    usersStore: [],
    // This contains a configuration of how these resources should be called 
    usersState: { 
        tableRows: 10,
        page: 1,
        sort: {
            col: 'id',
            dir: 'desc'
        }
    }
}

Add your endpoint base uri to the projects .env

VUE_APP_URL = 'https://my-domain.com'

Intercept the api calls to add any authorisation headers needed for your endpoint

queue.interceptors.request.use((config) => {
  const token = myAPIToken
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

submit.interceptors.request.use((config) => {
  const token = myAPIToken
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

Vuex State

Importing the tuxedo module into your store will expose the following state values.

submitting

A boolean value that signifies a request is either processing or not. Used for POST, PUT & DELETE requests, but not for GET requests.

Vuex Actions

Importing the tuxedo module into your store will expose the following actions

attach

Submits an attach request to the API endpoint, on a successful request it then removes the resource from the Vuex store

destroy

Submits a delete request to the API endpoint, on a successful request it then removes the resource from the Vuex store

Vuex Actions

Importing the tuxedo module into your store will expose the following mutations

attachResponse

This attaches the data value of a response to an existing state value using a merge.

For instance, we might have a user array, but we need to separately request a set of comments and attach them to their respective users.

users: [
    {
        id: 1,
        name: 'Hamish',
        comments: []
    }
]

We use our index action to call the comments from the API. We pass the response through to our attachResponse mutation along with an array value 'target' that tells the mutation what to target, in this case it targets the 'users' state and attaches comments based on the 'user_id' in the data set.

this.$store.dispatch('index', { collection: 'comments' })
    .then((res) => {
        this.$store.commit('attachResponse', { 
            rootState: state, 
            data: res.data,
            target: ['users', 'comments']
        })
    })

If more granular control is required we can pass in an array of object instead, and include some extra commands. Using the same example as above our target could also be the following.

target: [{ collection: 'users' }, { collection: 'comments'}]

By using the more verbose syntax it exposes some additional options.

####Attach an object instead of a collection Imagine each user in our users array has the following structure.

users: [
    {
        id: 1,
        name: 'Hamish',
        comments: [],
        address: {
            line1: '',
            line2: ''
        }
    }
]

The address is an object, whereas the comments is an array. So if we want to call in a bunch of addresses and associate them with the correct users we can attach each one as an object instead of a collection.

target: [{ collection: 'users' }, { object: 'address'}]

License

This project is licensed under the MIT License