Vuex 101 Snippet

yonas — Sat, 26 Sep 2020 20:18:54 +0000

Vuex 101

Vuex is a state management library for Vue.js.
It has five main concepts:

State - App level state container
Getter - Used to access state data in the component
Action - perform computations on state and fetch data from remote API
Mutation - Commonly called by Action to change State's data
Module - containerized for of the above 4. For example: Todos Module, Auth Module...

Code Snippets

create a folder named store inside src.

File /src/main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
    store,
    render: h => h(App)
}).$mount('#app');

File /src/store/index.js

import Vuex from 'vuex';
import Vue from 'vue';
import todos from './module/todos';

// Load Vuex
Vue.use(Vuex);

// Create store

export default new Vuex({
    modules: {
        todos
    }
});

File /src/store/modules/todos.js

import axios from 'axios'; 
// we use axios to fetch data from remote API

const state = {
    todos: []
};

const getters = {
    allTodos: (state) => state.todos;
};

const actions = {
    async fetchTodos({commit}) {
        const reponse = await axios.get('jsonplaceholder.typicode.com/todos');

        commit('setTodos', reponse.data);
    }
};

const mutations = {
    setTodos: (state, todos) => (state.todos = todos);
};


export default {
    state,
    getters,
    actions,
    muations
};

File /src/components/todos.vue

<template>
    <div>
        <h3> Todos </h3>
        <div class="todos">
            <div v-for="todo in allTodos" :key="todo.id">
                {{ todo.title  }}
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    name: 'Todos',
    methods: {
        ...mapActions(['fetchTodos'])
    },
    computed: {
        ...mapGetters(['allTodos'])
    },
    created() {
        this.fetchTodos()
    }
}
</script>

<style>
</style>

DEV Community: yonas

Vuex 101 Snippet

Vuex 101

Code Snippets