Vuex Data Do Not Load Sometimes, Until I Go VueDevTool

Hello developers.

I use Vue 3 and Vuex 4 in Laravel 8 and I use laravel-mix to create dist files. When I was working on Vue 2 and Laravel 7 with laravel-mix, I had the same problem. I like to know if my Vuex data loading issue is normal, or did I set up something wrong.

Setup
It’s actually pretty standard. I use namespaced modules.

// admin.js
import { store } from "./admin/Vuejs/store";
app.use(store);

// store.js
import { createStore } from "vuex";

import App from "./stores/App";
import Users from "./stores/User";

export const store = createStore({
    state: {},
    modules: {
        App,
        Users
    }
});

Each module has its own action to fetch related data from the database.

actions: {
   fetchData({commit}) {
       axios.get("/api/something").then({
           commit...
       })
   }
}

In the admin panel, I like to fetch everything on the page load. That’s why on App.vue, I dispatch all fetchData actions in all modules.

computed: {
  ...mapActions([
    "Users/fetchData",
    // and all other moduls. 
  ])
}

I don’t know if it’s relevant, but just in case, this is what I have on laravel-mix:

mix.vue3("resources/js/admin.js", "public/js")
    .vue3("resources/js/client.js", "public/js")
    .sass("resources/sass/admin.scss", "public/css")
    .sass("resources/sass/client.scss", "public/css")
    .browserSync("http://127.0.0.1:8000");

Problem
On the page load, App.vue is loading, but fetcData methods aren’t triggered until I open VueDevTool. When browser-sync reload the page, data is fetched sometimes, let’s say 20% of all reloads. Other times, I need to click Root first, and then AppLayout on VueDevTool’s component list section to trigger fetchData() actions. After some point, it has become pretty annoying. I hope someone can provide me a solution.

Thanks.

Your actions shouldn’t be in computed, they should be in methods. You should then call them from the created hook.

computed properties are evaluated lazily, so they won’t run until something tries to access them. In your case, that’s the Devtools. They are supposed to be used for synchronous calculations based on reactive data, which is not what you’re doing. They should not have side-effects.

Your actions are asynchronous and do have side-effects. They are not a good fit for computed properties at all. If you check the documentation for mapActions you’ll find that it’s supposed to be used in the methods section.

Thanks a lot.