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);
<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>
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');
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)
}
}
import { request } from "../APIbackend.js"
export async function getPRoducts(){
return request({
method:"GET",
url: `/`,
})
}
import getPRoducts
напиши const getPRoducts = async () => {
return [1, 2, 3]
}
и сможешь в этом убедиться.