Introduction to vuex (part one)
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;
With that done, our routes are now accessible.
Summary
In this tutorial, we were able to completely
- set up our project
- Set up firebase
- Create our views
- Set up our routes
Now moving on to part 2 of this tutorial, which would cover:
- State management
- Implementation of the core functionalities of this application.
In case you feel the need to go through the git repository, I provided the link to the repository right here.