Introduction to vuex (part one)

Published in

The Startup

5 min readJun 24, 2020

Vuex is the official state management library of vuex, It is used for state management as the description implies. It serves as a centralized store for the components in an application, with rules ensuring that the state can only be mutated predictably.

Starting up as a vuejs developer, vuex gave me a tough time, was confusing, and took sometime before I could master it.

In the course of this tutorial, We would be building a book library using vue and firebase. So brace yourself

App Overview

The aim of this application is for registered users to borrow books and for the bookkeeper to keep track of the books that were borrowed. The major features we would be implementing would be:

Authentication
Real-time database

From a technical point of vue…(wordplay 😆)

Vue — a modern javascript framework
Firebase — Authentication and real-time database
Vuex- For state management
Vue-Router — For routing

Note: This tutorial covers the full set up for this project. If you want to go straight into vuex and the core functionality implementation, visit part 2 of this tutorial

Setting up the project

First, we would be installing the official vue CLI as follows:

npm install --global vue-cli

After which we would create our application as follows:

vue create vuex-library

After which you would be prompted to select a preset. As you can see I have some saved presets already but I would be selecting “manually select features”. You can select it by going down to it and tapping Enter on your keyboard.

After selecting ‘manually select features ’, You would get another prompt with options of features to pick from. The options to be used for this tutorial has been manually selected already in the picture below. You can select a feature by tapping space bar then finish selection by tapping enter on your keyboard.

After which we would need to select the mode of vue-router to use. You can select it by typing ‘y’.

For this tutorial, we would be using the vue router’s history mode. Vue router’s default mode is the hash mode. The hash mode doesn’t reload when the URL changes also the vue router’s history mode utilizes history.push to achieve navigations.

For the remaining feature selection, they are based on preference and are of no consequence to this tutorial, So I would be skipping them. So now you can proceed into the vuex-library directory we generated now.

Starting the development server

You can start the vue.js development server by running the command:

npm run serve

Firebase Setup

Let’s start by creating a Firebase account here. Go to Console and click “Add project”. Give it any name you like and choose your country (the country doesn’t affect the project). After that, you will be redirected to the home page of a newly created project. From this console, you can configure your Firebase app.

In order to use Firebase in our app, we need to set up the Firebase SDK first. To do that just run following (don’t forget to stop dev server if it’s up):

npm install --save firebase

In the src folder, we would be creating a firebase folder where we would store firebase credentials:

In the firebase folder, we would create an index.js folder where we would place our firebase credentials:

import "firebase";import firebase from "firebase/app";import "firebase/auth";import "firebase/database";import "firebase/storage";var firebaseConfig = {apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID'};class Firebase {constructor() {firebase.initializeApp(firebaseConfig);firebase.analytics();this.auth = firebase.auth();this.db = firebase.database();this.storage = firebase.storage().ref();}}export default Firebase;

If you noticed, we are making use of Javascript classes, This is because we are trying to prevent memory leaks by using one firebase instance throughout the application as opposed to importing it everywhere it is needed.

After this, we would import firebase into our application’s entry point and make it accessible throughout the application.

import Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";import firebase from './firebase' //imported firebase into main.jsVue.config.productionTip = false;Vue.prototype.$firebase = new firebase(); //made it accessiblenew Vue({router,store,render: h => h(App)}).$mount("#app");

Now moving on……

Setting up our pages

First, we would start by creating our views. Here I created two extra views excluding the Home and about views generated by the vue CLI. The location of the views are in the views folder which is located in the src folder.

Now for these views to be connected to our application we would have to import them into our router and set their routes. e.g:

import Vue from "vue";import VueRouter from "vue-router";import Home from "../views/Home.vue";import register from '../views/registration.vue'import borrowbooks from '../views/borrowbooks.vue'import viewborrowers from '../views/viewborrowers.vue'Vue.use(VueRouter);const routes = [{path: "/home",name: "Home",component: Home},{path: "/", // making it the default route or landing page of the //applicationname: "register",component: register},{path: "/borrowbooks",name: "borrowbooks",component: borrowbooks},{path: "/viewborrowers",name: "viewborrowers",component: viewborrowers},{path: "/about",name: "About",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () =>import(/* webpackChunkName: "about" */ "../views/About.vue")}];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes});export default router;