{{ product.price | formatPrice }}
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.price | formatPrice }}
{{ product.title }}
{{ product.price | formatPrice }}