Introduction

All data processing and remote requests should be managed by Vuex data stores. Core module contains more than 10 default data stores and can be easily extended by store extensions. You can modify the existing store actions by responding to events. Events are specified in the docs below and could be found in the core module, where EventBus.$emit has been mostly used for Vuex Actions.

You should put all the REST calls, Elasticsearch data queries inside the Vuex Actions. This is our default design pattern for managing the data.

Vuex conventions

Before you start working with vuex, it's recommended to get familiar with our vuex conventions

Vuex modules

Override existing core modules

Existing core modules can be overridden in themes store. Just import any core store modules and override it using extendStore() utility method like the example given below in themes/default/store/ui-store.js.

import coreStore from '@vue-storefront/core/store/modules/ui-store'
import { extendStore } from '@vue-storefront/core/lib/themes'

const state = {
  // override state of core ui module...
}

const mutations = {
  // override mutations of core ui module...
}

const actions = {
  // override actions of core ui module...
}

export default extendStore(coreStore, {
  state,
  mutations,
  actions
})

And then import it in themes/default/store/index.js

import ui from './ui-store'

export default {
  ui
}

Working with data