Refusal to use products.json. Switching to using the MySQL database.

[dedyukhinnp]

Hello!
I'm developing an online store https://novoaroma.ru/ based on a book "Vue.js in Action" by Eric Hanchett.
In chapter 10 of the book, I successfully connected the local storage using Vuex and it worked.

I decided to stop using the "products.json" file.
I want to use a MySQL database.

I have a problem when I navigate to the file "novoaroma/store/modules/products.js" and replace the string axios.get('static/products.json') with axios.get('static/fetch.php').

After that, the site stops loading products. The console displays "undefined".

Please help me how to enable the download of products from the MySQL database (the "products" table).

the file "novoaroma/src/main.js" looks like this:

import Vue from 'vue'
import App from './App'
import router from './router'
require('./assets/app.css')
import { store } from './store/store';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

the file "novoaroma/store/store.js" looks like this:

import Vue from 'vue';
import Vuex from 'vuex';
import products from './modules/products';

Vue.use(Vuex);

export const store = new Vuex.Store({
    modules: {
        products
    }
});

the file "novoaroma/store/modules/products.js" looks like this:

const state = {
    products: {}
};

const getters = {
    products: state => state.products
};

const actions = {
    initStore: ({commit}) => {
        axios.get('static/products.json')
        .then((response) =>{
            console.log(response.data.products);
            commit('SET_STORE', response.data.products)
        });
    }
};

const mutations = {
    'SET_STORE' (state, products) {
        state.products = products;
    }
};

export default {
    state,
    getters,
    actions,
    mutations,
}

the file "novoaroma/static/products.json" looks like this:

{
  "products":[
    {
      "id": 1001,
      "title": "Аромадиффузор, 50 мл",
      "description": "Наш аромадиффузор наполнит помещение приятным ароматом и создаст уютную атмосферу в вашем доме или офисе.",
      "price": 90000,
      "image": "static/images/aromadiffusor_5.jpg",
      "availableInventory": 10,
      "rating": 4
    },
    {
      "id": 1002,
      "title": "Аромасаше",
      "description": "Аромасаше применяют для отдушивания постельного белья и одежды, для этого положите или повесьте его у себя в шкафу.",
      "price": 28000,
      "image": "static/images/aromasashe_4.jpg",
      "availableInventory": 10,
      "rating": 5
    },
    {
      "id": 1003,
      "title": "Автопарфюм, 7 мл",
      "description": "Автопарфюм служит для ароматизации пространства автомобиля. Закрепите освежитель с помощью подвески и наслаждайтесь.",
      "price": 40000,
      "image": "static/images/avtoparfum_8.jpg",
      "availableInventory": 10,
      "rating": 4
    },
    {
      "id": 1004,
      "title": "Свеча, 100 мл",
      "description": "При горении деревянный фитиль создаёт звук потрескивания как в камине, что привнесёт в атмосферу уют.",
      "price": 75000,
      "image": "static/images/svecha_6.jpg",
      "availableInventory": 10,
      "rating": 4
    },
    {
      "id": 1005,
      "title": "Спрей для дома, 15 мл",
      "description": "Распылите небольшое количество спрея в комнате, машине или над постельным бельем.",
      "price": 55000,
      "image": "static/images/aromasprey_5.jpg",
      "availableInventory": 10,
      "rating": 3
    }
  ]
}

the file "novoaroma/static/fetch.php" looks like this:

<?php 
// Include database configuration
require "config.php";

$output = array(); 
$query = "SELECT * FROM products"; 
$result = mysqli_query($link, $query);

while($row = mysqli_fetch_array($result)) { 
$output[] = $row; 
} 
echo json_encode($output);

// Close the database connection
mysqli_close($link);
?>

the file "novoaroma/src/components/Main.vue" looks like this:

<template>
    <div>
    <my-header :cartItemCount="cartItemCount"></my-header>
    <main>
        <div v-for="product in sortedProducts">
         <div class="row">
          <div class="col-md-5 col-md-offset-0">
            <figure>
              <img class="product" v-bind:src="product.image">
            </figure>
          </div>
          <div class="col-md-6 col-md-offset-0 description">
            <router-link
              tag="h1"
              :to="{ name : 'Id', params: {id: product.id}}">
              {{ product.title }}
            </router-link>
            <p v-html="product.description"></p>
            <p class="price">
              {{ product.price | formatPrice }}
            </p>
            <button class=" btn btn-primary btn-lg"
              v-on:click="addToCart(product)"
              v-if="canAddToCart(product)">
				      Добавить в корзину
				    </button>
            <button disabled="true" class=" btn btn-primary btn-lg" 
              v-else>
				      Добавить в корзину
				    </button>
			    	<transition name="bounce" mode="out-in">
              <span class="inventory-message" 
                v-if="product.availableInventory - cartCount(product.id) === 0"
                key="0">
                Товар закончился!
              </span>
              <span class="inventory-message" 
                v-else-if="product.availableInventory - cartCount(product.id) < 5"
                key="">
                Осталось {{product.availableInventory - cartCount(product.id)}} шт.
              </span>
              <span class="inventory-message" 
                v-else key="">
                Купите сейчас!
              </span>
            </transition>
			    	<div class="rating">
				      <span 
				    	  v-bind:class="{'rating-active': checkRating(n, product)}"
				    	  v-for="n in 5">☆
				      </span>
			    	</div>
          </div><!-- конец col-md-6 -->
        </div><!-- конец row -->
			<hr />
		</div><!-- конец v-for -->
    </main>
  </div>
</template>

<script>
import MyHeader from './Header.vue';
import { mapGetters } from 'vuex';
export default {
  name: 'imain',
  data() {
    return {
      cart: []
    };
  },
  components: { MyHeader },
  methods: {
    checkRating(n, myProduct) {
      return myProduct.rating - n >= 0;
    },
    addToCart(aProduct) {
      this.cart.push(aProduct.id);
    },
    canAddToCart(aProduct) {
      //return this.product.availableInventory > this.cartItemCount;
      return (
        aProduct.availableInventory >
        this.cartCount(aProduct.id)
      );
    },
    cartCount(id) {
      let count = 0;
      for (var i = 0; i < this.cart.length; i++) {
        if (this.cart[i] === id) {
          count++;
        }
      }
      return count;
    }
  },
  computed: {
    ...mapGetters([
      'products'
    ]),
    cartItemCount() {
      return this.cart.length || '';
    },
    sortedProducts() {
      if (this.products.length > 0) {
        let productsArray = this.products.slice(0);
        function compare(a, b) {
          if (a.title.toLowerCase() < b.title.toLowerCase())
            return -1;
          if (a.title.toLowerCase() > b.title.toLowerCase())
            return 1;
          return 0;
        }
        return productsArray.sort(compare);
      }
    }
  },
  filters: {
    formatPrice(price) {
      if (!parseInt(price)) {
        return '';
      }
      if (price > 99999) {
        var priceString = (price / 100).toFixed(2);
        var priceArray = priceString.split('').reverse();
        var index = 3;
        while (priceArray.length > index + 3) {
          priceArray.splice(index + 3, 0, ',');
          index += 4;
        }
        return priceArray.reverse().join('') + " ₽";
      } else {
        return (price / 100).toFixed(2) + " ₽";
      }
    }
  },
  created: function() {
    this.$store.dispatch('initStore');
  }
};
</script>

<style scoped>
.bounce-enter-active {
  animation: shake 0.72s cubic-bezier(.37,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

@keyframes shake {
  10%, 90% {
    color: red;
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    color: red;
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
</style>