- Vue app to learn about state management using Vuex.
- Note: to open web links in a new window use: ctrl+click on link
- 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.
- 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.
- Run
npm i
to install dependencies - Run
npm run serve
for a dev server. Navigate tohttp://localhost:8080/
. The app will automatically reload if you change any of the source files.
- 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)
})
}
}
- 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: Working. Updated june 2021.
- To-Do: Nothing
- 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"
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com