Home

Hello!

Having some issues updating a component when using async fetch + vuex, specifically when the page is accessed directly (refresh).

I can see the data display in console + in terminal (depending on where I log it and on first load). All good in this part. I can see the data render only after I navigate using the router, but not on first load.

Here is my code –

store/index.js

import axios from '~/plugins/axios';

export const state = () => ({
  items: []
});

export const mutations = {
  setItems(state, items) {
    state.items = items;
  }
};

export const actions = {
  async LOAD_ITEMS({ commit }, dataUrl) {
    const response = await axios.get(dataUrl);
    const data = response.data;
    commit('setItems', data);
  }
};

page/index.vue

<template>
  <div>
    //example page just to be able to switch back and forth with router.
    <nuxt-link to="/works">WORKS</nuxt-link>
    <nuxt-link to="/">HOME</nuxt-link>
    {{items}}
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  async fetch({ store }) {
    store.dispatch('LOAD_ITEMS', 'works');
  },
  computed: mapState(['items'])
};
</script>

plugin/axios.js

import axios from 'axios';
export default axios.create({
  baseURL: 'https://xxxxx.com/api/endpoint/'
});

Any help is appreciated – I love using Nuxt.js and would love to continue using it, but kind of stuck here. Might be a simple fix, a timing issue or similar. Looked similar issues, but can’t really find a concrete solution.

Thanks Thanks!