What is the best way to display data from the Nuxt.js store?

Question

What is the best way to display data from the Nuxt.js store?

I am new to Nuxt JS and following a tutorial on the Nuxt website. I created a store in store/index.js.

export const state = () => ({
  mountain: [],
})

export const mutations = {
  addMountain(state, mountain) {
    state.mountain.push(mountain)
  },
}

export const actions = {
  async fetchMountain() {
    const mountain = await fetch("https://api.nuxtjs.dev/mountains").then(
      (res) => res.json()
    );
    // this.mountain = mountain
  }
}

After that, I created a page in pages/index.js.

<template>
  <div>
    <h1>Nuxt Mountains</h1>
    <ul>
      <li v-for="mount of mountain">{{ mount.title }}</li>
    </ul>
    <button @click="$fetch">Refresh</button>
  </div>
</template>

<script>
import $store from "~/store";

export default {
  fetch() {
    return $store.state.mountain;
  },
};
</script>

However, when I run the page, I don't see anything displayed. Can someone help me with this issue?

https://i.sstatic.net/Ua3Mt.png

javascript vue.js nuxt.js vuex

Answer 1

Answer №1

Follow these steps to replicate the provided example.

/pages/index.vue

<template>
  <div>
    <h1>Nuxt Mountains</h1>
    <p v-show="$fetchState.pending">Loading mountains...</p>

    <ul v-show="!$fetchState.pending">
      <li v-for="mountain of mountains" :key="mountain.slug">
        {{ mountain.title }}
      </li>
    </ul>

    <hr />
    <button @click="$fetch">Refresh</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  async fetch() {
    await this.fetchMountains()
  },
  computed: {
    ...mapState(['mountains']),
  },
  methods: {
    ...mapActions(['fetchMountains']),
  },
}
</script>

Key points to note:

mapState and mapActions are not compulsory here; you could access them via $store.dispatch, etc., directly but using them is considered cleaner and a good practice
Ensure you include the :key attribute in the v-for; it is mandatory
Prefer utilizing async/await consistently instead of mixing with .then

/store/index.js

export const state = () => ({
  mountains: [],
})

export const mutations = {
  SET_MOUNTAINS(state, mountains) {
    state.mountains = mountains
  },
}

export const actions = {
  async fetchMountains({ commit }) {
    const response = await fetch('https://api.nuxtjs.dev/mountains')
    const mountains = await response.json()
    commit('SET_MOUNTAINS', mountains)
  },
}

Key aspects to consider:

Using UPPER_SNAKE_CASE for mutation names is a recommended convention
Consistently applying the async + await pattern
Naming the data as mountains (plural) makes more sense since there are multiple items
Calling the mutation after fetching data from an API within the action method aligns with standard practices in Nuxt2

Answer 2

Follow these steps to replicate the provided example.

/pages/index.vue

<template>
  <div>
    <h1>Nuxt Mountains</h1>
    <p v-show="$fetchState.pending">Loading mountains...</p>

    <ul v-show="!$fetchState.pending">
      <li v-for="mountain of mountains" :key="mountain.slug">
        {{ mountain.title }}
      </li>
    </ul>

    <hr />
    <button @click="$fetch">Refresh</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  async fetch() {
    await this.fetchMountains()
  },
  computed: {
    ...mapState(['mountains']),
  },
  methods: {
    ...mapActions(['fetchMountains']),
  },
}
</script>

Key points to note:

mapState and mapActions are not compulsory here; you could access them via $store.dispatch, etc., directly but using them is considered cleaner and a good practice
Ensure you include the :key attribute in the v-for; it is mandatory
Prefer utilizing async/await consistently instead of mixing with .then

/store/index.js

export const state = () => ({
  mountains: [],
})

export const mutations = {
  SET_MOUNTAINS(state, mountains) {
    state.mountains = mountains
  },
}

export const actions = {
  async fetchMountains({ commit }) {
    const response = await fetch('https://api.nuxtjs.dev/mountains')
    const mountains = await response.json()
    commit('SET_MOUNTAINS', mountains)
  },
}

Key aspects to consider:

Using UPPER_SNAKE_CASE for mutation names is a recommended convention
Consistently applying the async + await pattern
Naming the data as mountains (plural) makes more sense since there are multiple items
Calling the mutation after fetching data from an API within the action method aligns with standard practices in Nuxt2

Answer 3

Answer №2

The store object is already available in your context, so there's no need to import it. Here's an example of how to use it:

 computed: {
     mountain () {
           return this.$store.state.mountain;
     }
  }

ps. Why put this inside the computed property? Because we want to avoid unnecessary rerendering of the component whenever a module update occurs. Only changes to the data being accessed should trigger a rerender.

However, using modules would be a better practice.

To understand this concept better, it's important to know that Nuxt automatically imports all files within the store folder.

Every file created within the store folder will function as a new module in the Vuex store. For example, if you create a file named todo.js in the store folder, you can access it throughout the project like this:

 computed: {
     mountain () {
           return this.$store.state.todo.mountain;
     }
  }

I recommend exploring this further here: https://nuxtjs.org/docs/directory-structure/store/

Answer 4

The store object is already available in your context, so there's no need to import it. Here's an example of how to use it:

 computed: {
     mountain () {
           return this.$store.state.mountain;
     }
  }

ps. Why put this inside the computed property? Because we want to avoid unnecessary rerendering of the component whenever a module update occurs. Only changes to the data being accessed should trigger a rerender.

However, using modules would be a better practice.

To understand this concept better, it's important to know that Nuxt automatically imports all files within the store folder.

Every file created within the store folder will function as a new module in the Vuex store. For example, if you create a file named todo.js in the store folder, you can access it throughout the project like this:

 computed: {
     mountain () {
           return this.$store.state.todo.mountain;
     }
  }

I recommend exploring this further here: https://nuxtjs.org/docs/directory-structure/store/

What is the best way to display data from the Nuxt.js store?

Answer №1

Answer №2

Similar questions

Delete Entries in MongoDB Collection According to Unique User Pairs

Cloned element does not trigger on click event

Is it possible to switch from a dropdown menu to radio buttons?

Set up npm and package at the main directory of a web application

I am experiencing an issue with the checkbox in my React app where the state is not updating after it has been

Utilizing a shared service for multiple JSON datasets in AngularJS: A beginner's guide

Obtain information from express middleware

Iterating through a list using curly braces in a vue for loop

Tips for generating a <div> element with multiple children using a loop

Retrieving a component's property within its event handler in React

Experiencing an issue of receiving an undefined value while attempting to retrieve a value from an input box

Maintain form activity post submission using jQuery's addClass and removeClass methods

Launch the Image-Infused Modal

What is the best way to calculate the variance between the most recent and previous data points in an array in the span of an hour using JavaScript

The Vue3 counterpart of vNode.computedInstance

Problem with VeeValidate's Confirmed rule not being applied correctly in ValidationProvider

I am having trouble retrieving images from the backend API. Can someone assist me in resolving this issue?

AngularJs Controller with explicit inline annotation

Do not continue submitting if the innerHTML matches the specified value

How to access elements in every document fragment