Не могу понять почему Vuex отдаёт пустой список в компонент Vue, в чём моя ошибка?

Question

[Skolandhati]

Пишу сайт на Vue3 и столкнулся с довольно проблематичным для меня вопросом.
Я не могу получить состояние хранилища store.js (Vuex) в компоненте App.vue.
В самом Vuex.store мутации и экшены написаны вроде правильно, если прописать console.log выдают то что нужно, если в геттерах написать console.log выдаёт undefined, ну и сам геттер при вызове в App.vue так же undefined, axios запрос написан в отдельном файле в виде функции и вызывается в main.js, в чём причина проблем не могу понять.

Mой store.js (vuex)

import {createStore} from 'vuex'
import {getPRoducts} from "../services/entities/product_request.js"

let store = {
    state(){
        return {
            products: [],
            index: 1
        }
    },
    actions:{
        async getPRoducts({commit}){
            try {
                const products = await getPRoducts()
                commit("SET_PRODUCTS_STATE", products, { root: true })
                // console.log(products)
                return products
            }
            catch (e) {
                Promise.reject(e)
            }
        }
    },
    mutations:{
        SET_PRODUCTS_STATE(state, products){
            state.products = products
        },
    },
    getters:{
        allproducts: state => state.products,
        ind: state => state.index,
        PRODUCTS(state){
            return state.products
        }
    },
    strict: process.env.NODE_ENV !== 'production'
}
export default createStore(store);

Mой App.vue

<template>
    <div id="app">
        <div id="append">
            <vMainWrapper/>
        </div>
    </div>
</template>

<script>
    import { mapActions, mapGetters, mapState} from "vuex";
    import vMainWrapper from "./components/users-button/v-main-wrapper.vue"
    import vHomePage from "./components/Home/v-HomePage.vue"
    export default {
        name: 'app',
        components: {
            vMainWrapper,
            vHomePage,
        },
        methods: {
            ...mapActions([
                "getPRoducts"
            ]), 
        },
        watch: {
        },
        computed: {
            ...mapGetters([
                "PRODUCTS",
                "allproducts"
            ]),
            ...mapState([
                'products'
            ]),
        },
        created() {
            // this.getPRoducts()
            // console.log(this.$store.state.products)
            // console.log(this.allproducts)
        },
        mounted(){
            this.getPRoducts()
            console.log(this.PRODUCTS)
        }
    }
</script>

Мой main.js

import {createApp} from 'vue'
import App from './App.vue'
import store from './store/store2.js'
import {initAPIproducts} from './services/APIbackend.js'

initAPIproducts(store)

createApp(App)
.use(store)
.mount('#app');

Мой запрос к API с использованием axios

APIbackend.js

import axios from "axios";
import NProgress from "nprogress";

NProgress.configure({ easing: 'ease', speed: 500 })

let APIproducts
export function initAPIproducts (store) {
    APIproducts = axios.create({
        baseURL: "http://localhost:3000/products",
        timeout: 3000
    })
    APIproducts.interceptors.request.use(
        config => {
            NProgress.start()
            return config
        }
    )
    APIproducts.interceptors.response.use(
        data => {
            NProgress.done()
            return data
        },
        error => {
            NProgress.done()
            if(error.response.status === 404)
            store.commit('AUTH', false)
            return Promise.reject(error)
        }
    )
}

export async function request (option = {}){
    try {
        const {data} = await APIproducts(option)
        return data
    }
    catch (error){
        return Promise.reject(error)
    }
}

модуль с функцией запроса данных у API для store.js

product_request.js

import { request } from "../APIbackend.js"

export async function getPRoducts(){
    return request({
        method:"GET",
        url: `/`,
    })
}

Comments

[Aetae]

Не по теме: конструкция

async func(){
  try {
    ...some async action
  }
  catch (e) {
    Promise.reject(e)
  }
}

абсолютно бессмысленна.
Promise.reject(e) никуда не возвращается, а значит ничего не делает.
Да и если бы ты его возвращал:

async func(){
  try {
    ...some async action
  }
  catch (e) {
    return Promise.reject(e)
  }
}

результат бы ничем не отличался от:

async func() {
    ...some async action
}

Answer 1

[Aetae]

С Vue и Vuex проблем нет.
Вместо import getPRoducts напиши

const getPRoducts = async () => {
  return [1, 2, 3]
}

и сможешь в этом убедиться.

Проблема с твоим "сервисом" запросов. Смотри в консоль - он вообще работает, у тебя настроен cors, чтоб запрашивать с других портов? Если нет, то и не настраивай - используй devserver proxy и обращайся по относительным ссылкам как это будет и в проде.