⚡ Vuex State Management

• Vue app to learn about state management using Vuex.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Vuex State Management
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Uses the Vue javascript framework with Vuex state management to create a simple webpage, add weblinks to a list and remove them using mutation.
• Vuex designates a central location where the state data is stored, modified and accessed. Vuex is more suitable for larger Vue apps but the objective here was to learn how it works and then add to the app complexity later.
• Mutations are used for synchronous events. Actions are used for asynchronous events.

📷 Screenshots

.

📶 Technologies

• Vue framework v2
• Vuex v3 a central location from which state data is stored, modified and accessed.
• Vue CLI v4
• Vue DevTools extension for Chrome was useful for debugging and seeing what was happening with the state when Vuex was used.

💾 Setup

• Run npm i to install dependencies
• Run npm run serve for a dev server. Navigate to http://localhost:8080/. The app will automatically reload if you change any of the source files.

💻 Code Examples

• extract from the store.js file, code for mutations and actions

mutations: {
    ADD_LINK: (state, link) => {
      state.links.push(link)
    },
    REMOVE_LINK: (state, link) => {
      state.links.splice(link, 1)
    },

    // remove all empties the array
    REMOVE_ALL: (state) => {
      state.links = []
    }
  },
  actions: {
    removeLink: (context, link) => {
      context.commit("REMOVE_LINK", link)
    },
    removeAll({commit}) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit('REMOVE_ALL')
          resolve()
        }, 1500)
      })
    }
  }

🆒 Features

• Vuex mutations used to add a payload 'link' to the links array in the /src/store.js file

  mutations: {
    ADD_LINK: (state, link) => {
      state.links.push(link)
    }
  },

• Promise.resolve() used in removeAll() function.

📋 Status & To-Do List

• Status: Working. Updated june 2021.
• To-Do: Nothing

👏 Inspiration

• A Vuex Tutorial by Example - Learn Vue State Management by Gary Simon - mar 17, 2018.
• Luuk Gruijs, Medium article, "Understanding, creating and subscribing to observables in Angular"

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]