Skip to content

📋 App to learn about state management using Vuex. Tutorial from Gary Simon of Coursetro

License

Notifications You must be signed in to change notification settings

AndrewJBateman/vuex-state-management

Repository files navigation

⚡ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 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

Example screenshot.

📶 Technologies

💾 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)
    }
  },

📋 Status & To-Do List

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

👏 Inspiration

📁 License

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

✉️ Contact

About

📋 App to learn about state management using Vuex. Tutorial from Gary Simon of Coursetro

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published