Learn Vuex

A Scrimba course on Vuex which mirrors the official documentation.

    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' }
          ]
        },