Learn Vuex

Learn Vuex

    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,
    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.