A17 Boilerplate + A17 Helpers Store

Key Concepts

Create your store with actions, mutations and an initial state :


import Store from '@area17/a17-helpers/src/utility/store'

const actions = {
  addItem(context, payload) {
      context.commit('addItem', payload)
  },
  clearItem(context, payload) {
      context.commit('clearItem', payload)
  },
  empty(context, payload) {
    context.commit('empty', payload)
  }
}

const mutations = {
  addItem(state, payload) {
    const newCart =  state.cart
    newCart.push(payload)
    state.cart = newCart
    return state
  },
  clearItem(state, payload) {
    const newCart =  state.cart
    newCart.splice(payload.index, 1)
    state.cart = newCart
    return state
  },
  empty(state, payload) {
    state.cart = []
    return state
  }
}

const initialState = {
  cart: []
}

export default new Store({ actions, mutations, initialState })
      

Dispatch changes :

store.dispatch('addItem', { id: '1', title: 'Product 1', price: 50 })

Subscribe to changes :

this.storeObserver = store.subscribe(this.render)

Unsubscribe to changes :

this.storeObserver()


Demo Cart

Products


Product 1 - 50€


Product 2 - 200€


Product 3 - 100€


Cart

Nothing in Cart


Total : 0