Simple Guide to Vuex (with Vue.js)
February 9, 2020Why use Vuex
- The general advice is don’t use Vuex until you think you need it
- If you think Vuex is too heavy for your needs, try store pattern
- Vuex is a centralize storage, meaning multiple components can access the same storage, and it could be accessed outside of components as well
- Vuex consist of state (the data), getters (computed state), mutations (function to modify the state) and actions (async functions to fetch data and commit mutations).
My use case for Vuex is I was building a SPA with multiple pages of content with SSR as well based on this sample.
- Vuex is useful to preload the data/state before the component is rendered
- When I am switching pages/components, I can reuse the data/state as cache to avoid fetching data from server again
Actions
is nice as a repository of code how the data/state is filled, decouple the fetch code from components.
Setup
Install
npm install vuex --save
Setup
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Usage
import store from './store'
const app = new Vue({
// router, // optional
store, // to allow this.$store access in component
render: h => h(App)
})
Create
Create src/store/index.js
.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
home: null,
homePages: {}
},
mutations: {
increment (state) {
state.count++
},
setHome(state, data) {
state.home = data
},
setHomePage(state, { id, data }) {
Vue.set(state.homePages, id, data)
}
},
actions: {
fetchFileHashes({ commit, state }) {
return new Promise((resolve, reject) => {
if (!state.fileHashes) {
fetch('/data/hash.json', {cache: 'no-cache'}).then(response => response.json()).then(data => {
commit('setFileHashes', data)
resolve(data)
})
}
else {
resolve(state.fileHashes)
}
})
},
// example via callback
fetchHome({ commit }) {
fetch('/data/home.json').then(response => response.json()).then(data => {
commit('setHome', data)
})
},
// example via async
async fetchHomePage({ dispatch, commit, state }, id) {
const response = await fetch(`/data/page-${id}.json`)
const data = await response.json()
commit('setHomePage', {id, data})
}
}
})
export default store
You can update store from outside of component.
import store from './store'
store.commit('increment')
const count = store.state.count
Components
Call vuex in components
export default {
computed: {
home() {
return this.$store.state.home
},
homePage1() {
return this.$store.state.homePages[1]
}
count() {
return this.$store.state.count
}
},
created() {
this.$store.commit('increment') // commit for mutation
this.$store.dispatch('fetchHome') // dispatch for action
this.$store.dispatch('fetchHomePage', 1)
}
}
❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn