Vuex
by Gerard Sans | @gerardsans
SANS
GERARD
Google Developer Expert
Google Developer Expert
International Speaker
Spoken at 98 events in 26 countries
Blogger
Blogger
Community Leader
900
1.5K
Trainer
Master of Ceremonies
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
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
s
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
Vuex by Gerard Sans | @gerardsans
Vuex
By Gerard Sans
Vuex
State Management is key to build modern Web Apps
- 3,391
