Vuex

Vuex was the classic Vue store with mutations/actions/modules. This lesson covers practical patterns, syntax, and mistakes to avoid.

Legacy Vuex Stores

Vuex was the classic Vue store with mutations/actions/modules.

For Vue 3, prefer Pinia; learn Vuex to maintain older apps.

import { createStore } from 'vuex'
const store = createStore({
  state: () => ({ count: 0 }),
  mutations: { inc(state) { state.count++ } },
  actions: { inc({ commit }) { commit('inc') } }
})

Classic mutation/action split.

Migrate

Move modules to Pinia stores gradually.

Prefer Composition API + script setup.
Use computed for derived UI.
Keep side effects intentional.
Practice in a small Vite app.

Vuex Cheatsheet

Quick reference for patterns covered in this lesson.

Item	Example	Purpose
mutations	sync	Vuex
actions	async	Vuex
modules	split	Vuex
mapState	helpers	Options
pinia	replacement	Modern
devtools	both	Debug

Why Pinia Won

Less boilerplate, better TS, no mutations mandate.

Common Mistakes

Starting new Vuex projects.
Rewriting everything at once without tests.

Key Takeaways

Vuex is important in Vue apps.
Practice in SFCs.
Prefer clear naming.
Check Vue docs for details.

Pro Tip

Migrate feature-by-feature from Vuex modules to Pinia stores.