Google Developer Expert

International Speaker

Spoken at 98 events in 26 countries

Blogger

Community Leader

900

1.5K

Trainer

Master of Ceremonies

Vuex

v3.0.1 (Feb 2016)
218 contributors
CLI integration
16K stars

v6.0.1 (Dec 2015)
126 contributors
CLI integration
3K stars

v4 (June 2015)
603 contributors
Inspired by Flux
42K stars

Vuex

Overview

State Management for Vue
Inspired by Redux
Composable using Modules
Vue DevTools integration

Components

Actions

Mutations

commit

dispatch

mutate

State

update

Vuex one-way data flow

Actions

(async)

Mutations

(sync)

Actions vs Mutations

DevTools

Backend

commit

Packages

vue devtools

vuex

vuex-router-sync

Features

Utilities

Counter

Increment

Decrement

Reset

Total

import Vue from "vue";
import App from "./App";

import store from "./store";

new Vue({
  el: "#app",
  store,
  components: { App },
  template: "<App/>"
});

src/app.component.ts

Store Setup

src/main.js

Components

Actions

Mutations

commit

dispatch

mutate

State

update

import Vue from "vue";
import App from "./App";
import store from "./store";

new Vue({
  el: "#app",
  store,                    // this.$store.state
  components: { App },
  template: "<App/>"
});

src/app.component.ts

Store Setup

src/main.js

import actions from "./actions";
import mutations from "./mutations";

export default new Vuex.Store({
  actions, 
  mutations, 
  state, 
});

src/app.component.ts

State

src/store/index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const state = {
  counter: 0
};

export default new Vuex.Store({
  state, 
});

import mutations from "./mutations";
import actions from "./actions";

export default new Vuex.Store({
  state,
  mutations,
  actions,
});

Components

Actions

Mutations

commit

dispatch

mutate

State

update

export default {
  increment(context) {
    context.commit("INCREMENT");
  },
  decrement({ commit }) {
    commit("DECREMENT");
  },
  reset({ commit, dispatch, state, getters }) {
    context.commit("RESET");
  }
};

src/app.component.ts

Counter Actions

src/store/actions.js

Components

Actions

Mutations

commit

dispatch

mutate

State

update

export default {
  INCREMENT(state) {
    state.counter += 1;
  },
  DECREMENT(state) {
    state.counter -= 1;
  },
  RESET(state) {
    state.counter = 0;
  }
};

src/app.component.ts

Counter Mutations

src/store/mutations.js

Components

Actions

Mutations

commit

dispatch

mutate

State

update

<Counter
  @increment="increment" @decrement="decrement" @reset="reset"
/>

export default {
  methods: {
    increment() {
      this.$store.dispatch("increment");
    },
    reset() {
      this.$store.dispatch("reset", { value: 0 });
    }
  },
}

src/app.component.ts

Dispatching Actions

src/App.vue

We pass events up to container

<Counter :total="total" 
  @increment="increment" @decrement="decrement" @reset="reset"
/>

export default {
  computed: {
    total() {
      return this.$store.state.counter;
    }
  }
}

src/app.component.ts

Updating Component

src/App.vue

We will improve this part later

<div>
  <div class="total">{{total}}</div>
  <button @click="$emit('increment')">+</button>
  <button @click="$emit('decrement')">-</button>
  <button @click="$emit('reset', { value:0 })">C</button>
</div>

export default {
  name: "Counter",
  props: ["total"]
};

src/app.component.ts

Counter

src/components/Counter.vue

// src/store/actions.js
reset({ commit }, payload) {
  commit("RESET", payload);
}

// src/store/mutations.js
RESET(state, { value }) {
  state.counter = value;
}

src/app.component.ts

Adding payload

Getters

State

Property

getters

Computed

getters

s

g

Vuex Getters

Helpers to access Store
Avoid Components tight coupling with Store
Memoized for performance

import getters from "./getters";

export default new Vuex.Store({
  actions, 
  mutations, 
  getters,
  state, 
});

src/app.component.ts

Vuex Store

src/store/index.js

src/app.component.ts

Getters

src/store/getters.js

export default {
  total: state => state.counter,

  overflow: state => {
    return state.counter > state.maximum;
  }
};

this.$store.state.counter;
this.$store.state.pagination.page;

Tight coupling

Components

State

Getters: loose coupling

this.$store.getters.total;
this.$store.getters.page;

Components

getters

State

A small change won't break all Components now

export default {
  total: state => {
    return state.counter;
  },
  page: state => {
    return state.pagination.page;
  }
};

src/app.component.ts

Property Getters

src/store/getters.js

State

Property Selectors

Computed Selectors

s

Computed Getters

Computed values, can use other getters
Memoised for performance
Default one-slot memoisation

// State
{ 
  todos: [{ id: 1, text: 'Learn Vuex', complete: false }],
  currentFilter: "SHOW_ALL"
}

// Visible Todos
[{ id: 1, text: 'Learn Vuex', complete: false }]

src/app.component.ts

Example: visibleTodos Getter

// State
{ 
  todos: [{ id: 1, text: 'Learn Vuex', complete: false }],
  currentFilter: "SHOW_COMPLETED"
}

// Visible Todos
[]

const getters = {
  todos: state => state.todos,
  currentFilter: state => state.currentFilter,
};

const getters = {
  todos: state => state.todos,
  currentFilter: state => state.currentFilter,
};

Todos Getters

src/store/getters.js

Getter: Visible Todos

const getters = {
  visibleTodos: function(state, getters) {
    var todos = getters.todos.slice().reverse();
    switch (getters.currentFilter) {
      case "SHOW_ACTIVE":
        return todos.filter(t => !t.done);
      case "SHOW_COMPLETED":
        return todos.filter(t => t.done);
      case "SHOW_ALL":
      default:
        return todos;
    }
  }
};

src/store/getters.js

<todo-list 
  :todos="visibleTodos" :currentFilter="currentFilter"
/>
export default {
  computed: {
    visibleTodos() {
      return this.$store.getters.visibleTodos;
    },
    currentFilter() {
      return this.$store.getters.currentFilter;
    }
  }
};

src/app.component.ts

Using visibleTodos

src/App.vue

<todo-list 
  :todos="visibleTodos" :currentFilter="currentFilter"
/>
export default {
  computed: {
    ...mapGetters(['visibleTodos', 'currentFilter'])
  }
};

ComponentHelpers

import { mapState } from 'vuex';
export default {
  data: () => ({ 
   factor: 12 
  }),
  computed: {
    ...mapState(['total']),
    ...mapState({ counter: 'total' }),
    formula(state) { 
      return state.total*this.factor;
    }
  }
}

src/app.component.ts

Mapping Helpers: mapState

import { mapActions, mapMutations, mapGetters } from 'vuex';

export default {
  methods: {
    ...mapActions(['increment', 'decrement']),
    ...mapActions({ clear: 'reset' }),  // alias
  computed: {
    ...mapGetters({ total: 'total' })
  }
}

src/app.component.ts

Other mapping helpers

Modules

Namespaced Module

Extension

Module

Root

Module

Modules

import cart from './modules/cart'
import products from './modules/products'

export default new Vuex.Store({
  modules: {
    cart,
    products
  },
})

src/app.component.ts

Store Setup

src/store/index.js

export default {
  namespaced: true,
  state: {
    items: [],
    checkoutStatus: null
  },
  actions,
  mutations
  getters,
}

src/app.component.ts

Cart Module

src/store/modules/cart.js

export default {
  namespaced: true,
  state: {
    all: [],
  },
  actions,
  mutations
  getters,
}

src/app.component.ts

Products Module

src/store/modules/products.js

<Product v-for="product in products"
  @click="addProductToCart(product)" 
/>

export default {
  computed: mapState({
    products: state => state.products.all
  }),
  methods: mapActions('cart', [
    'addProductToCart'
  ]),
  created () {
    this.$store.dispatch('products/getAllProducts')
  }
}

src/app.component.ts

ProductList Component

Reusing stores

{ 
  counter: 7
}

Single Counter

dispatch("increment");

State

Action

User clicks

{ 
  counter: 8
}

Mutation

commit("increment");

Multiple Counters

{ 
  "a": { counter: 7 },
  "b": { counter: 3 },
}

a

b

State

User clicks

{ 
  "a": { counter: 7 },
  "b": { counter: 2 },
}

dispatch('b/decrement');

Action

Mutation in Module B

commit("decrement");

import counter1 from "./modules/counter";
import counter2 from "./modules/counter";

export default new Vuex.Store({
  modules: {
    a: counter1,
    b: counter2
  }
});

src/app.component.ts

Store Setup

src/store/index.js

export default {
  namespaced: true,
  state: () => ({
    counter: 0
  }),
  // same actions, mutations and getters
};

src/app.component.ts

Store Setup

src/store/modules/counter.js

More

@sarah_edo

Blake Newman

Sarah Drasner

@blakenewman