vuex-helpers

Overview

vuex-helpers is a client-side Javascript library for ShelfNetwork distributed auction platform. Contains ready-for-use **entity** Vuex modules and some helpful utils.

Entity modules:

• User
• Lot
• Lots
• I18n
• Notifications
• TbcPayments

Requirements

• node (version 10+)

Local development

Install dependencies:

npm install

Run a local dev server:

npm run serve

vuex-helpers can be connected to platform-web-app using npm link.

1. Link vuex-helpers: run npm link
2. In platform-web-app repo run npm link @shelf.network/vuex-helpers

Troubleshooting

1. If run npm install or npm update while dev server is running it’ important to delete .cache dir in node_modules

Connecting entity modules to another module

This approach should be used when you want some shared functionality from entity module to be present in another vuex module.

The idea is to connect submodules in place where you need them to have a context.

If you would like to interact with a lot retrieval functionality you can add Lots submodule to the store where you want the interaction to happen.

Your resulting module tree will look like this: %somePreceedingPath%/yourUiModule/lots

This way you can connect as many independent submodules as you need.

Usage example

For example you have a separate page in your app, e.g. LotPage and you have a corresponding vuex module for it.

Consider the following page store structure

[image:6E90E6FE-CE56-4D40-B375-2FFED3749FB3-29927-0001135F77F2B922/Screen Shot 2019-06-07 at 3.54.59 PM.png]

1. Connecting the Lot submodule

To use Lot submodule here to fetch data about the item you should add this submodule to your module first.

It should be added to the index.js file like this:

import {
  generateLotModule,
  generateLotsModule,
  withSubModules
} from "@shelf.network/vuex-helpers";

import state from "./state";
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";

const insideModule = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

const moduleCreator = withSubModules({
  lot: generateLotModule,
  similarLots: generateLotsModule
})(insideModule);

export default moduleCreator;

You can spot lot: generateLotModule which will lead to inside/lot module being registered in vuex.

The key of this object sets the name of submodule in vuex.

2. Registering the ui module of a page

We created a moduleCreator function which will adds submodules to the module passed insideModule

In order to create the UI module itself you need to call the moduleCreator with the following parameters: moduleCreator({Vue, sdk})

Vue - Vue instance of the app sdk - SDK instance which is used in the app

moduleCreator returns an object which is a usual vuex module

{
    namespaced: true,
    state: ...,
    actions: ...,
    getters: ...,
    mutations: ...
}

3. Interacting with entity submodule

You can interact with connected module in usual vuex way through dispatch and getters

Just remember that you are working with nested module, which implies changing the path of the action or getter

A helper function is available in this package - createSubModuleAliaser

You should pass a name that you used in step 1 to create a correct module path

It returns a function which accepts action or getter name and appends it to the submodule path

const lotSubmodule = createSubModuleAliaser('lot')`
lotSubmodule('GET_LOT') // returns 'lot/GET_LOT'

// Mapping of submodule in step 1 (index.js)
const moduleCreator = withSubModules({
  lot: generateLotModule,
  similarLots: generateLotsModule
})(insideModule)

// Creating an aliaser for submodule in actions.js
import {
  LotTypes,
  createSubModuleAliaser
} from '@shelf.network/vuex-helpers'

const lotSubmodule = createSubModuleAliaser('lot')

// Dispatching action to lot submodule
// Usual dispatch(actionName, payload)
await dispatch(
  lotSubmodule(LotTypes.actions.TOGGLE_WATCHLIST), {
    lotId: lotId || getters.data.id
    })
)

// Getting data from submodule via getters
// Usual getter, just from nested module
const { details } = getters[lotSubmodule(LotTypes.getters.lot)]