Learn Vuex

This tutotorial teaches you Vuex through ten interactive screencasts. You'll learn about state, mapState, getters, mutations, actions, modules, form handling, plugins and testing. The tutorials are approved by the core Vue team, and embeeded in the official Vuex docs!

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment (state) {
                state.count++
            }
        }
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state: {
            count: 0
        }
    });
    
    new Vue({ 
        el: '#app',
        store,
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state: {
            count: 3
        }
    });
    
    import { mapState } from 'vuex';
    
    new Vue({ 
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
       state: {
           todos: [
               { id: 1, text: '...', done: true },
               { id: 2, text: '...', done: false },
           ]
       },
       getters: {
           doneTodos: state => {
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment (state) {
                state.count++
            },
            incrementBy (state, payload) {
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment (state) {
                state.count++
            },
            decrement (state) {
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const moduleA = {
        namespaced: true,
        state: { 
            count: 3
        },
        mutations: {
            increment (state) {
                state.count++
            }
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        strict: true,
        state: {
            message: 'Hello Vuex',
        },
        mutations: {
            updateMessage (state, message) {
                state.message = message
            }
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    // const myPlugin = store => {
    //     // Called when store is initialized
    //     store.subscribe((mutation, state) => {
    //         // Called after every mutation
    //         // Mutation comes in the format `{ type, payload }`
    //     })
    // }
    
    // function createWebSocketPlugin (socket) {
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state: {
          count: 0 ,
          products: [
              { id: 1, title: 'Apple', category: 'fruit' },
              { id: 2, title: 'Orange', category: 'fruit' },
              { id: 3, title: 'Carrot', category: 'vegetable' }
          ]
        },

The interactive tutorial that powers the official Vuex documentation 💪

Vuex is the canonical way to handle data stores in Vuex. It's like what Redux is to React.

Throughout ten interactive tutorials, you'll learn the core concepts behind Vuex step-by-step.

This course will give your a solid understanding of Vuex basics. This course also takes the collaboration between Scrimba and team Vue to a new level, as Scrimba screencasts are now powering both the Vue docs and the Vuex docs.

What you'll learn:

  • state
  • mapState
  • getters
  • mutations
  • actions
  • modules
  • form handling
  • plugins
  • testing

Throughout the course, you'll be able to interact with the screencasts whenever you want. This provides you with a powerful tool for when you're confused: simply pause the screencasts and interact with the code until you feel comfortable with continuing the course!

COMING SOON: This course will soon be updated with a second part where Connor will use Vuex to create note taking app.

people love this course 😍

why you'll learn faster 🔥

Hi, I'm your teacher 👋

The course creator

Connor Lindsey

Connor is a software developer specialized on Vue.js. He's also a part of Maker Academy, which makes STEM education accessible through community and technology.

Thank Connor for the course

secure your free spot

100,000 people can't be wrong