v-select-box-vuex

Description

A helper used to create the store modules for the v-select-box, a vue.js component that provides a list with search and pagination.

Installation

npm install v-select-box-vuex

Usage

1//module.js
2
3import { createStoreModule } from 'v-select-box-vuex'
4const base = 'http://localhost:1234/api'  //A simple string with the url of your api.
5
6const endpoint = {
7  name: 'Users',          // The name to access the actions and getters in your store
8  resource: '/users',     // The relative path of your resource in your api.
9  map ({ Id, Name }) {    // This function will map your api response to the v-select-box default item format
10    return { id: Id, text: Name, selected: false }
11  }
12}
13
14const modules = {
15  [endpoint.name]: createStoreModule(base, endpoint.resource, endpoint.name, endpoint.map)
16}
17
18export default {          // This is a store module ready to be imported
19  namespaced: true,
20  modules
21}

1//store.js
2
3import Vue from 'vue'
4import Vuex from 'vuex'
5import selectBox from './module'
6
7Vue.use(Vuex)
8
9export default new Vuex.Store({
10  namespaced: true,
11  modules: {
12    selectBox
13  }
14}
15

Details

Currently, your api response should have this fixed format:

1{
2  "Page": 1,
3  "PageCount": 1,
4  "Result": []
5}

As long as those properties are there, everything should work. To access your newly created store module, the name provided before must be used. For the case of the example above, the actions and getters would be:

1  // Getters
2  ...mapGetters('selectBox/Users', ['itemsUsers', 'pageUsers', 'pageCountUsers', 'selectedItemsUsers'])
3  
4  //Actions
5  ...mapActions('selectBox/Users', ['clearUsers', 'requestUsers', 'selectItemUsers'])
6  
7  //Methods
8  onSearchUsers (query) {
9    return this.clearUsers().then(() => this.requestUsers({ ...query }))
10  },
11  
12  //v-select-box options object
13  const options: {
14    multiSelect: false,
15    items: this.itemsUsers,
16    onSelect: this.selectItemUsers,
17    onSearch: this.onSearchUsers,
18    page: this.pageUsers,
19    pageCount: this.pageCountUsers,
20    loadMore: this.requestUsers,
21    clearItems: this.clearUsers,
22    params: {
23      search: 'name',
24      pageSize: 'size'
25    }
26  }

New Features

This helper is still rough around the edges but it will improve overtime. Some much needed features are being worked on, they'll be put here as soon as they're ready.

Your feedback is appreciated!