CODEWITHSUNDEEP
javascriptvue.jsvuexnuxt.js
Moiz Sohail
Moiz Sohail

Reputation: 648

(Nuxt) Page not re-rendering data on reload

I am trying create a to fetch data from the server and show them to the user. But the issue is that nothing apart from the dummy information is displayed.

Basically there are two scenarios:

1. Navigating to the page from some other link (This works as expected)

Explanation: Such as going from http://localhost:3000/ to http://localhost:3000/assignments/explore and it renders all the fetched contents as expected.

Vue plugin ss

enter image description here

2. Entering the page directly through the url or press refresh

Explanation: By directly typing http://localhost:3000/assignments/explore in the url nothing is displayed apart from the dummy card

Vue plugin ss

enter image description here

As you can see the length of the assignment state is 1 instead of 3 and the vuex action saveAssignments is also missing in this case

Template tag in explore.vue

...
<div v-for="assignment in assignments" :key="assignment._id">
   <Card :assignment="assignment"></Card>
</div>
...

Script Tag in explore.vue

fetch() {    
  this.$store.dispatch('assignment/fetchAssignment')
},
computed: {
  assignments() {
    return this.$store.state.assignment.assignments
  },
 },

assignment.js //Vuex Store

export const state = () => ({
  assignments: [ //dummy data
    {
      _id: '5f1295181ebf00dd0070de1',
      title: 'dummy',
      Description: 'asfd',
      Price: 50,
      createdAt: '2020-07-18T06:22:09.037Z',
      updatedAt: '2020-07-18T06:22:09.037Z',
      __v: 0,
      id: '5f12951081ebf00dd0070de1',
    },
  ],
})
export const mutations = {
  saveAssignments(state, newAssignments) {
    state.assignments = state.assignments.concat(newAssignments)
  },
}
export const actions = {
  async fetchAssignment({ commit }) {
    const data = await this.$axios.$get('assignments')

    commit('saveAssignments', data)
  },
}

Any help will be appreciated

Upvotes: 1

Views: 2999

Answers (1)

Moiz Sohail
Moiz Sohail

Reputation: 648

Found the solution

I just had to add the return statement before the dispatch function in fetch()

fetch(){
  return this.$store.dispatch('assignment/fetchAssignment')
}

Found my answer here

Nuxtjs async await in a page doesnt work on page refresh

Upvotes: 2

Related Questions