Introduction

All data processing and remote requests should be managed by Vuex data stores. The core modules generally contain store folder inside. You can modify the existing store actions by responding to events. Events are specified in the docs below and can be found in the core module (opens new window), 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

• Product
• Category
• Cart
• Checkout
• Order
• Stock
• Sync
• User
• Attribute
• UI Store (opens new window)

Override existing core modules

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

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 src/modules/index.ts

import ui from './ui-store'

export default {
  ui
}

Related

Working with data