how to extract modules to separate files

[vesper8]

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]

Hello,

Please see namespaces in https://vuex.vuejs.org/en/modules.html

[vesper8]

I use vuex modules plenty, where the state, getters, mutations and actions are clearly defined. But I am confused when it comes to abstracting your Vapi construct to a separate file

Is there any chance you might provide a sample example on what it looks like when using Vapi please?

[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>

[vesper8]

thank you very much.. I simply wasn't exporting properly

I was doing

export default { posts }

instead of

export default posts

Now everything is working

Cheers!!

[christianmalek]

Haha, good to hear. 👍

[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