Features

What is a feature?

Features are vertical slices of the application. How you decide on what is a feature is subjective and completely up to you. You want to try to split up your app into these slices to control growing complexity and reduce "context switching". Teams can work within a feature's context without worrying too much about other features (unless the feature depends on another feature). A feature should never depend on inner parts or components of another feature. Only use the external API of a feature to interact with another feature.

Store Module

Each feature will have its own storage. This comes in the form of a Vuex module. Take a look at the dashboard feature's store module:

src/features/account/store.js

import store from '@/store'

store.registerModule('dashboard', {
  namespaced: true,

  // State loaded when this component is first loaded.
  state: {
    test: 0
  },

  mutations: {
    updateTest (state, newVal) {
      state.test = newVal
    }
  },

  actions: {
    updateTest ({ state, commit, rootState, dispatch }, newVal) {
      console.log(newVal)
      commit('updateTest', newVal)
    }
  }
})

Service

Each feature will have a service. The service is responsible for encapsulating calls to the backend API. Here's the account feature's service:

import store from '@/store'
// import auth from '@/auth/helpers'

export default class Service {
  constructor (options) {
    this.id = store.state.auth.user.id
  }

  getProfile () {
    // Mock data.
    // Replace this with actual call to backend server below.
    const parsed = {
      email: 'prograhammer@gmail.com',
      name: 'David Graham',
      country: 'USA',
      addressLine1: '1234 Some St.',
      addressLine2: '',
      state: 'Texas',
      zipcode: '78789'
    }

    // Simulate loading time.
    return new Promise((resolve) => {
      setTimeout(() => { resolve(parsed) }, 500)
    })

    /*
    return auth.get('/account')
      .then((response) => {
        const parsed = {
          email: response.email,
          name: response.name,
          country: response.country,
          addressLine1: response.address_line1,
          addressLine2: response.address_line2,
          state: response.state,
          zipcode: response.zipcode
        }

        return new Promise((resolve) => { resolve(parsed) })
      })
      .catch((error) => {
        return new Promise((resolve, reject) => { reject(error) })
      })
    */
  }
}