Intro to State Management with Vuex

Outline

• 05 minutes intro
• 10 minutes API
• 45 minutes livecoding

Vuex

A state management pattern + library for Vue.js applications

API

const store = new Vuex.Store({})

State

const store = new Vuex.Store({
  state: {
    name: 'John Doe',
    favoriteColor: 'turquoise'
  }
})

console.log(store.state.name) // John Doe

Mutations

const store = new Vuex.Store({
  state: {
    name: 'John Doe',
    favoriteColor: 'turquoise'
  },

  mutations: {
    SET_NAME(state, newName) {
      state.name = newName
    },

    SET_FAVORITE_COLOR(state, newFavoriteColor) {
      state.favoriteColor = newFavoriteColor
    }
  }
})

store.commit('SET_NAME', 'Jane Doe')
console.log(store.state.name) // Jane Doe

Actions

const store = new Vuex.Store({
  state: {
    name: 'John Doe',
    favoriteColor: 'turquoise'
  },

  mutations: {
    SET_NAME(state, newName) {
      state.name = newName
    },

    SET_FAVORITE_COLOR(state, newFavoriteColor) {
      state.favoriteColor = newFavoriteColor
    }
  },

  actions: {
    async fetchUserDetails({ commit }, userId) {
      const { name, favoriteColor } = await api.fetchUserDetails(userId)
      commit('SET_NAME', name)
      commit('SET_FAVORITE_COLOR', favoriteColor)
    }
  }
})

store.dispatch('fetchUserDetails', 'superMDguy').then(() => {
  console.log(store.state.name) // retrieved name from API
  console.log(store.state.favoriteColor) // retrieved favorite color from API
})

Getters

const store = new Vuex.Store({
  state: {
    name: 'John Doe',
    favoriteColor: 'turquoise'
  },

  mutations: {
    SET_NAME(state, newName) {
      state.name = newName
    },

    SET_FAVORITE_COLOR(state, newFavoriteColor) {
      state.favoriteColor = newFavoriteColor
    }
  },

  actions: {
    async fetchUserDetails({ commit }, userId) {
      const { name, favoriteColor } = await api.fetchUserDetails(userId)
      commit('SET_NAME', name)
      commit('SET_FAVORITE_COLOR', favoriteColor)
    }
  },

  getters: {
    userSummary(state) {
      return `${state.name}, favorite color is ${state.favoriteColor}`
    }
  }
})

console.log(store.getters.userSummary) // John Doe, favorite color is turquoise

Modules

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  },
  state: { ... },
  mutations: { ... },
  actions: { ... }
})

console.log(store.state.a) // -> `moduleA`'s state
console.log(store.state.b) // -> `moduleB`'s state

Livecoding

Repo: https://git.io/fNHEF

Coins Structure

{
  "id": 1,
  "name": "Bitcoin",
  "symbol": "BTC",
  "quotes": {
    "USD": {
      "price": 6504.83559012
    }
  },

  "inPortfolio": false,
  "amountOwned": 0.0
}

Questions?