VueJS - VueX: Book Shop application

September 2020

> 🔨 Book Shop application with Vuex. From Udemy 'Devenir opérationnel rapidement en Vue et Vuex'

* * *

Demo on Github page

Server: vue-shop-json-server

Vue main concepts

What is vue?

• Vue (or Vue.js) is an open-source front-end JavaScript framework
• Vue is the view layer of an MVC application (Model View Controller)
• Vue is currently one of the most popular JavaScript libraries/frameworks
• Unlike other popular JavaScript projects, Vue is not backed by a large corporation like React (Facebook) or Angular (Google). Vue was originally written by Evan You and the open-source community.

Tools

For browser:

• Vue DevTools on Chrome
• Vue DevTools on FireFox

For IDE:

• Vue VSCode Snippets

vbase

vimport

vmethod

vdata

...

You will need Vue CLI.

vue create my-project

Select your options automatic or manual (then select features: eslint, vuex...)

cd my-project

npm run serve

What is vueX?

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

VueX is is like Redfux for React but with special features for Vue.

• Getters will make values able to show statically in our templates. In other words, getters can read the value, but not mutate the state.
• Mutations (we commit mutations) will allow us to update the state, but they will always be synchronous. Mutations are the only way to change data in the state in the store.
• Actions (we dispatch actions) will allow us to update the state, asynchronously, but will use an existing mutation. This can be very helpful if you need to perform a few different mutations at once in a particular order.

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

Exemple: Counter without VueX

Counter.vue

<template>
  <div>
    <h2>Counter</h2>
    <div>{{ currentValue }}</div>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        currentValue: 0
      }
    },
    methods: {
      increment() {
        this.currentValue = this.currentValue +1;
      },
      decrement() {
        this.currentValue = this.currentValue -1;
      }
    },
  }
</script>

Exemple: Counter with VueX

Counter.vue

<template>
  <div>
    <h2>Counter</h2>
    <div>{{ currentValue }}</div>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment() {
        this.$store.commit('INCREMENT_COUNTER');
      },
      decrement() {
        this.$store.commit('DECREMENT_COUNTER');
      }
    },
    computed: {
      currentValue() {
        return this.$store.state.currentValue;
      }
    },
  }
</script>

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentValue: 0
  },
  mutations: {
    //METHOD(state, payload)
    //Payload: other datas
    INCREMENT_COUNTER(state){
      state.currentValue +=1;
    },
    DECREMENT_COUNTER(state){
      state.currentValue -=1;
    },
  },
  actions: {
  },
  getters: {      
  },
  modules: {
  }
})

Useful links

• codeconcept / vuex-counter
• codeconcept / vuex-ideas
• codeconcept / vuex-commerce
• Vue Development In 2019: What You Need To Know
• Vue.js: Guide
• How to map your VueX data to Vue models
• Vuex, qu'est-ce que c'est ?
• Intro to Vue.js: Vuex
• json-server
• My JSON Server
• Create a FREE 🎉 Fake REST API with JSON Server Running On The Internet