Vue Academy · Lesson

Vuex Fundamentals

Understand the Vuex store and centralized state.

Vuex Fundamentals is a free Vue Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

Is the “Vuex Fundamentals” lesson free?

Yes — the full text of “Vuex Fundamentals” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.

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