Nuxt.js store (vuex) cheat sheet 📝

first.md

Understanfing vuex (store) in Nuxt.js

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

Key Terms

• 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'
    })
  },
}

second.md

Accessing state, getters values and commiting mutations 🚀

<template>
<!--  (pages/todo.vue)  -->
  <div>
    <h2>My Todos</h2>
    <ul>
      <li v-for="(todo, id) in todos" :key="id">
        {{ todo.title todo.due }}
        Status - {{  todo.status }}
      </li>
    </ul>
    <button @click="markAsDone">Mark all as done</button>
  </div>
</template>

<script>

import { mapMutations, mapGetters } from 'vuex'

export default {
  computed: {
    todos() {
    // Syntax to access store state - this.$store.storeFileName.stateToAccess
      return this.$store.state.todos.todoList
    },
    /* To access a particular getter value, first you import vuex mapGetters (line 18)
      and use the spread operator ...mapGetters with the parameters below
      first param - store file-name. In our case, our store is saved at (/store/todos.js). therefore our filename is todos
      second param - an array containing all the getters we want to access in our current page/component
    */
    ...mapGetters('todos', ['firstTodo']),
    // from the code above, our getter (firstTodo) is now accessilbe as a computed property
  },
  methods: {
    markAsDone(){
      /*
        Commiting/involking our mutation
        syntax - this.$store.commit('storeFileName/mutationName')
      */
      this.$store.commit('todos/markAllComplete')
    }
  }
}
</script>