vueschool.io
Rolf Haug
Teacher @ Vue School
Full Stack developer
Consultant
Foodie 🌶
Oslo, Norway
Alex
Kyriakidis
Teacher @ Vue School
Author of The Majesty of Vue.js 1 & 2
Vue.js Contributor
Consultant @ BuildingLink
Amsterdam
280 lessons • 59.000+ users
Who's using Vuex?
Workshop Structure
Buddy System
✅ 🛑 👨🏫👩🏫
What is Vuex?
State Management Pattern
& Library for Vue.js applications
Centralized Store
Enforces rules that results in predictable behavior
What does Vuex solve?
🧟♀️
Vuex was developed to fight zombies!
Vuex is based on Flux
Pattern made by Facebook engineers
The Notorious Zombie Bug
Back-and-forth betweeen being resolved and an issue
Facebook wanted a predictable app
The underlying issue
The Data Flow
When the app grows
Quite messy!
The Data Flow
Consequentially invoked many updates
Asynchronous updates
returned wrong or corrupt data.
🧟♀️
Causing the Zombie Bug
Flux Pattern
Ensures a one way data flow
Action
Dispatcher
Store
View
Shopping Cart
Example
Action
Dispatcher
Store
View
User clicks add to cart in view
Action organize data
Dispatches to the Store
View reads from the Store
Flux Pattern
Ensures a one way data flow
Results in predictable behavior
Clear text? or Greek?
Action
Dispatcher
Store
View
Don't worry!
🤔
Data sharing
The Flux pattern makes it easy to share data between components
Communicating with props and events is perfectly fine
Some apps benefit from having a centralized store
👌
👉
Centralized Store
Works like an event bus/hub in many ways
We do not have to "guide" events through components anymore
Flux
Just a pattern
Not a framework
Popular Frameworks implements the Flux Pattern
React → Redux
Vue → Vuex
What is State?
State is your application data
Imagine a components data globally available
The Store
The store is the global component that holds our data - the application state
export default {
data() {
return {
products: [...]
}
}
}
import Vuex from 'vuex'
export default new Vuex.Store({
state: {
products: [...]
}
})Component vs Vuex Store
The store is the "component"
The state is the "data"
What should we store?
Vuex solves certain problems, but you should not store everything
Do you need the data to be globally available?
Yes → Vuex Store
No → Components data
- Authenticated User
- Blog posts
- Products
- toggle state
- Form data
- Loading state
Global vs local data
Makes sense?
npm install vuex --saveYou can install Vuex with the node package manager
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)Import and use in our app
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export new Vuex.Store({
state: {
// Top 3 movies of all time according to IMDB
movies: [
{id: 1, name: 'The Shawshank Redemption'},
{id: 2, name: 'The Dark Knight'},
{id: 3, name: 'The Godfather'}
]
}
})Create the Store
The Store can be stored anywhere
~/store.js
import store from '@/store' ~/store/index.js
// main.js
import Vue from 'vue'
import store from '@/store'
import router from '@/router'
import App from '@/App'
new Vue({
store,
router,
el: '#app',
components: {
App
},
template: '<App/>'
})
Inject the Store
// MoviesList.vue
export default {
computed: {
movies () {
return this.$store.state.movies
}
}
}Access the store under this.$store
Wrap the state in computed properties
-
State is reactive
-
Computed properties reevaluate on state change
-
Changes will be reflected in all components
Summary
Vuex makes it easy to share data between multiple components
The store is the single source of truth
Questions?
👩💻👨🏽💻 Up and Running
- https://bit.ly/2UT5zSh
- install dependencies (yarn or npm install)
👩💻👨🏽💻 Up and Running
👩💻👨🏽💻 Assignment (20 mins)
-
-
-
-
- use state in Product.vue to display the product with the specified id
1. Vuex Intro
By Rolf Haug
