I'm learning Vue 3 with Vuex 4 and I'm stucked with something that I'm pretty sure it's simple but I can't see.

In few words, i'm trying to set some data in state to have it available to use it in my ponents but it isn't working.

Let me show you the code:

/// store.js

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state: {
    user: {},
    products: []
  },
  mutations: {
    SET_USER: (state, user) => {
      state.user = user;
    },
    SET_PRODUCTS: (state, products) => {
      state.products = products;
    },
  },
  actions: {
    GET_USER: async function ({ mit }) {
      const user = await axios.get('')
      mit('SET_USER', user)
    },
    GET_PRODUCTS: async function ({ mit }) {
      const products = await axios.get('')
      mit('SET_PRODUCTS', products)
    },
  }
})

export default store;

/// MyComponent.vue

<template>
  <div class='bg-aerolab-main'>
    {{ user }} {{ productsTest }}
  </div>
</template>

import { puted } from "vue";
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const user = puted(() => store.state.user);
    const productsTest = puted(() => store.state.products);
    console.log(user);
    console.log(productsTest);

    return {
      user,
      productsTest
    };
  }
}

/// main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import axios from 'axios'
import VueAxios from 'vue-axios';
import store from './store';

const app = createApp(App)
  app.use(VueAxios, axios)
  app.use(store)
  app.mount('#app')

Of course the {{ users }} and {{ productsTest }} bindings are not displaying any data aswell as both console.logs.

PD: I've tried to fetch the data directly in my ponent and it's working so it's not something related to the data fetched from the API.

I'm learning Vue 3 with Vuex 4 and I'm stucked with something that I'm pretty sure it's simple but I can't see.

In few words, i'm trying to set some data in state to have it available to use it in my ponents but it isn't working.

Let me show you the code:

/// store.js

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state: {
    user: {},
    products: []
  },
  mutations: {
    SET_USER: (state, user) => {
      state.user = user;
    },
    SET_PRODUCTS: (state, products) => {
      state.products = products;
    },
  },
  actions: {
    GET_USER: async function ({ mit }) {
      const user = await axios.get('https://coding-challenge-api.aerolab.co/user/me')
      mit('SET_USER', user)
    },
    GET_PRODUCTS: async function ({ mit }) {
      const products = await axios.get('https://coding-challenge-api.aerolab.co/products')
      mit('SET_PRODUCTS', products)
    },
  }
})

export default store;

/// MyComponent.vue

<template>
  <div class='bg-aerolab-main'>
    {{ user }} {{ productsTest }}
  </div>
</template>

import { puted } from "vue";
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const user = puted(() => store.state.user);
    const productsTest = puted(() => store.state.products);
    console.log(user);
    console.log(productsTest);

    return {
      user,
      productsTest
    };
  }
}

/// main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import axios from 'axios'
import VueAxios from 'vue-axios';
import store from './store';

const app = createApp(App)
  app.use(VueAxios, axios)
  app.use(store)
  app.mount('#app')

Of course the {{ users }} and {{ productsTest }} bindings are not displaying any data aswell as both console.logs.

PD: I've tried to fetch the data directly in my ponent and it's working so it's not something related to the data fetched from the API.

• javascript
• vue.js
• vuex
• vuejs3
• vuex4

2 Answers 2

You've to dispatch that actions inside mounted hook :

import { puted , onMounted} from "vue";
import { useStore } from 'vuex';

export default{
  setup() {
    const store = useStore();
    const user = puted(() => store.state.user);
    const productsTest = puted(() => store.state.products);
   
  onMounted(()=>{
    store.dispatch('GET_USER');
    store.dispatch('GET_PRODUCTS');
  })
    return {
      user,
      productsTest
    };
  }
}

Fetch Data from main.js

I'm sure the selected answer would work properly if you are fetching data from your ponent(s). However, if you are looking to Fetch Data from main.js as OP was asking or app.js if you are using Vue3 with Laravel, you should use mounted() in your createApp() function.

const app = createApp({
    mounted(){
        store.dispatch('YOUR_ACTION') // GET_USER or GET_PRODUCTS in OP's case
    }
});

Remember to set up your Vuex store before calling this so the store is defined.

In your ponents

You can access the puted state with position API, as shown below:

import { puted } from "vue";
import { useStore } from "vuex";

setup() {
        const store = useStore();
       
        return {
            products: puted(() => store.state.YOUR_STATE), 
            //replace YOUR_STATE with your own. In OP's case, it's user or products
        };
    }