bradtraversy/vuex_todo_manager

Vuex crah course app

Vuex Todo Manager

This project is part of the Vuex Crash Course on YouTube

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

vuex_todo_manager's Issues

Remove await from async deleteTodo

The await is causing a delay when deleting, removing the await fixes it. Which should be fine with current implementation. Although might not work in a production environment.

async deleteTodo({ commit }, id) { axios.delete(https://jsonplaceholder.typicode.com/todos/${id}`);

commit('removeTodo', id);

}`

Need Help - Can I use The same method while adding Data to FireStore

@bradtraversy Thank you for your tutorial.

This is really helping lot. I am stuck at this point. Could you please assist me?

I am unable to update my recipeArray after inserting data to Firestore.

I am using nuxt framework

store/recipes.js

export const state = () => ({
  recipesList: []            //***This gets updated using action fetchRecipes action and used on index page
})

export const getters = {
 // There is no use of this at this point of time
}

export const actions = {
    async addRecipe({ commit }, title) {
    const response = this.$fireStore.collection('recipes')
    try {
      await response
        .add({
          title: title,
          slug: title,
          publish: true,
          created: new Date()
        })
        .then(res => {
          // eslint-disable-next-line no-console
          console.log('Added document with ID: ', res.id)   //**This is printing data on console
           commit('addRecipe', res)      //** This mutation call is where I am having issue, looks like firestore needs a separate call to get the data, can i have async call inside another async? also res does not have the required data in it to be added to recipeArray
        })
    } catch (e) {
     
      console.log(e)

      alert(e)
      return
    }
    alert('Success.')
  },


async fetchRecipes({ commit }) {
    const recipeArray = []
    const response = this.$fireStore.collection('recipes')
    try {
      await response
        .where('publish', '==', true)
        .orderBy('created', 'desc')
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            recipeArray.push(doc.data())
          })
        })
      commit('setRecipes', recipeArray)
    } catch (e) {
          // alert(e)
      alert('Error Fetching Data, please contact Webmaster')
    }
  }
}



export const mutations = {
  setRecipes: (state, recipesList) => (state.recipesList = recipesList),
  addRecipe: (state, recipe) => state.recipesList.unshift(recipe)
}