State

The data that defines the condition of an application.

Examples

Why Vuex?

• Great managing state and communication across components
• Ideal for large applications
• Can be a lot to get started
• So many files...

It is not required

Store

Basically a container that holds your application state

Demo

Simple Application Flow

Redux Application Flow

Mutators

The only way to actually change the state of a Vuex Store.

Think of them as events.

No Reducers

(from React planet)

Reducers are pure functions that take the previous state of an action and return the new state.

Mutation Types

It is common to use constants for mutation types

export const ADD_TO_CART = 'ADD_TO_CART'
export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'

Actions

Standard way to commit mutations.

Ideal for asynchronous operations.

Payloads

Additional data passed as arguments

// dispatch with a payload
store.dispatch('incrementAsync', {
  amount: 10
})

// dispatch with an object
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

// MUTATIONS
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

Getters

Computed derived state from the store

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

Modules

Multiple stores into one store to keep the single tree structure

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

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

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

store.state.a // -> moduleA's state
store.state.b // -> moduleB's state

App Architecture

├── index.html
├── main.js
├── api
│   └── ... # abstractions for making API requests
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # where we assemble modules and export the store
    ├── actions.js        # root actions
    ├── mutations.js      # root mutations
    └── modules
        ├── cart.js       # cart module
        └── products.js   # products module

Mappers

mapState(namespace?: string, map: Array<string> | Object): Object

mapGetters(namespace?: string, map: Array<string> | Object): Object

mapActions(namespace?: string, map: Array<string> | Object): Object

mapMutations(namespace?: string, map: Array<string> | Object): Object

// Example

...mapGetters({
  products: 'cartProducts',
  checkoutStatus: 'checkoutStatus'
}),

methods: mapActions([
  'increment',
  'decrement',
  'incrementIfOdd',
  'incrementAsync'
])

Last Thoughts

Vuex

vs

Redux, Flux, React

Links

• https://github.com/vuejs/vuex

• http://vuex.vuejs.org/en/

• http://redux.js.org/docs/introduction/

• http://facebook.github.io/flux/docs/in-depth-overview.html#content