• Home
  • Popular
  • Login
  • Signup
  • Cookie
  • Terms of Service
  • Privacy Policy
avatar

Posted by Mark DS


08 Jan, 2025

Updated at 20 Jan, 2025

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

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: ''
})

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:

">

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

{{ product.title }}

{{ product.price | formatPrice }}

Товар закончился! Осталось {{product.availableInventory - cartCount(product.id)}} шт. Купите сейчас!
☆
">