NTL,R - A "store" is basically a reactive container that holds your application state. Also, data in a store is univeral, i.e you can access them anywhere in your vue/nuxt.js application
-
State - state is just like data(){return{..}} in normal vue.js, but with different syntax in a store
-
Mutation - mutations also are literally methods:{methodName(){...}} in a normal vue.js file, but with different syntax in a store
-
Commit - commit is used to fire/involke a mutation
-
Getters - are used for modifying store states (data)
// CREATING OUR STORE
export const state = () => ({
// Creating a new state called todoList
todoList: [
{
title: 'Learn Vuex',
due: 'Today 6:30px',
status: 'done'
},
{
title: 'Integrate Store In My App',
due: 'Tomorrow 6:30px',
status: 'pending'
},
],
// N.b - A single store can house multiple states, mutations and getters
})
/*
---
In the example below, we'd created a getter that returns the first todo in our todoList state
---
*/
export const getters = {
firstTodo: (state) => {
return state.todos[0]
},
}
// Mutations
export const mutations = {
// A mutation (method) that marks all the todo in our todoList state as done
markAllComplete(state) {
state.todoList.forEach((todo) => {
todo.status = 'done'
})
},
}