Vue Academy · Lesson

Vuex Fundamentals

Understand the Vuex store and centralized state.

Lesson 1 of 313 steps

Vuex Fundamentals is a free Vue Academy lesson on CoddyKit. This is lesson 1 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 3 lessons in total.

Why Centralized State?

As Vue apps grow, sharing data between many components becomes painful. Passing props down and emitting events up across deeply nested trees is fragile. Vuex solves this with a single, centralized store that any component can read from and write to in a predictable way.

The Single Source of Truth

Vuex follows a one-way data flow. All shared application state lives in one place called the store. Components read state from the store and request changes through a controlled API, so you always know where data comes from and how it changes.

Installing Vuex

Vuex 4 is the version built for Vue 3. Install it with your package manager, then create and register the store with your app.

npm install vuex@4

Creating the Store

Use createStore to define a store. The state option is a function returning the initial reactive state object.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

Registering the Store

Pass the store to your app with app.use(store). This makes it available to every component via this.$store.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

The State Property

The state object holds your application data. It is reactive: when state changes, any component using it re-renders automatically. Think of it as the data() of your whole app.

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

Accessing State in Options API

Inside a component you reach the store through this.$store.state. A computed property keeps the value reactive.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

Using State in the Template

Once exposed via a computed property, state is used like any local value in the template.

<template>
  <p>Current count: {{ count }}</p>
</template>

The mapState Helper

Writing many computed properties by hand is repetitive. The mapState helper generates them for you from an array of state names.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

mapState with Renaming

Pass an object to mapState to rename properties or compute derived values from state.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

Accessing State in Composition API

With the Composition API, call useStore() inside setup to get the store instance, then read state through a computed.

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

Quick Check

Test your understanding of Vuex fundamentals.

Answer it in the interactive lesson

Recap

Vuex provides a centralized, reactive store as a single source of truth. You build it with createStore, register it via app.use, and read state through computed properties or the mapState helper. In the Composition API you reach the store with useStore(). Next you will learn how to actually change that state safely.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “Vuex Fundamentals” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Vuex Fundamentals”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 3 lessons in total.

What will I learn in “Vuex Fundamentals”?

Understand the Vuex store and centralized state. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 3.

How long does the “Vuex Fundamentals” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy