how to extract modules to separate files

Hi there, I’m using the latest version and it’s great and it’s working fine if I set everything up from inside the store.js file

but I would like to abstract my resources to separate files, or at the very least to one file called Apis.js which is inside ./modules/Apis.js

Clearly I’m just brain-farting here but I don’t know how to make this work. This is what I’ve got so far

store.js:

import { topics, nav } from './modules/Apis';

const store = new Vuex.Store({
  modules: {
    topics,
    nav,
  },
});

Apis.js:

import Vapi from 'vuex-rest-api';

const topics = new Vapi({
  baseURL: '/api',
  state: {
    topics: [],
  },
})
  .get({
    action: 'getTopic',
    property: 'topic',
    path: ({ id }) => `/topics/${id}`,
  })
  .get({
    action: 'getTopics',
    property: 'topics',
    path: ({ limit }) => `/topics?limit=${limit}`,
  })
  .post({
    action: 'updateTopic',
    property: 'topic',
    path: ({ id }) => `/topics/${id}`,
  })
  .getStore();

const nav = new Vapi({
  baseURL: '/api',
  state: {
    nav: [],
  },
})
  .get({
    action: 'getNav',
    property: 'nav',
    path: ({ season }) => `/nav?season=${season}`,
  })
  .getStore();

export default {
  topics,
  nav,
};

And then in my components I want to call (for example the nav) like this:

export default {
  computed: {
    ...mapState({
      nav: state => state.nav.nav,
      pending: state => state.nav.pending,
      error: state => state.nav.error,
    }),
  },
  methods: {
    ...mapActions(['getNav']),
  },
  created() {
    this.getNav({ params: { season: this.currentSeason } });
  },
}

[christianmalek]

Sorry, I don’t understand your question. Could you please be more specific?

Every Vapi instance is made to create one store (or module if you need to create many respectively). So If you need multiple modules you could just separate every one in a single file.

Example:

// posts module

import Vapi from 'vuex-rest-api'

const posts = new Vapi({
  baseURL: 'https://jsonplaceholder.typicode.com',
  state: {
    posts: []
  }
})
  .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}`
  })
  .getStore()

export default posts

// store.js

import posts from './modules/posts'
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    posts,
    // other store,
    // another store
  }
})

export default store

//example component

<template>
  <div>
    <button @click="getPost({params: {id: 12}})">get post with id 12</button>
    <button @click="listPosts">list posts</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'getPost',
      'listPosts'
    ])
  }
}
</script>

[christianmalek]

@vesper8 If you want to use destructuring on default exports you could do it this way: https://github.com/babel/babel/issues/3049#issuecomment-286205548