Извините, если вопрос звучит немного странно, но я не знаю, как объяснить его наилучшим образом.
Я создаю простое приложение fullstack с Vue, Vuex, Express и Postgresql.
Теперь я беру данные из своей базы данных и отображаю их в своем представлении. Все работает нормально, но я заметил, что могу сделать это двумя разными способами, поэтому хотел спросить вас, какое решение является лучшим.
Первый способ:
Я определяю два отдельных маршрута в моем приложении express. Первый возвращает все объекты клиентов, а второй возвращает только указанного c клиента. Затем я могу вызвать действие в моем vuex, чтобы получить данные и отобразить данные через геттеры в моем шаблоне
Express .app:
router.route('/')
.get(async (req, res) => {
try {
const allcustomer = await db.query(`select * from Kunde`);
res.json(allcustomer.rows);
} catch (err) {
console.log(err);
res.json('An error occurred!');
}
})
router.route('/:id')
.get(async (req, res) => {
try {
const { id } = req.params;
const onecustomer = await db.query(`Select * from Kunde where kunde.id = ${id}`)
console.log(onecustomer.rows[0]);
res.send(onecustomer.rows[0]);
} catch (err) {
res.send("An error occurred!");
}
})
module.exports = router;
Vuex:
const state = {
customers: [],
onecustomer: {}
}
const getters = {
allcustomers: (state) => state.customers,
onecustomer: (state) => state.onecustomer,
}
const actions = {
async fetchcustomers({ commit }) {
const response = await axios.get('http://localhost:3000/customer');
commit('setcustomers', response.data);
},
async fetchonecustomer({ commit }, id) {
const response = await axios.get(`http://localhost:3000/customer/${id}`);
console.log(response.data)
commit('setonecustomer', response.data);
}
}
Второй способ:
У меня в приложении express только один маршрут, который возвращает всех клиентов. В моем Vuex у меня есть только действия, которые выбирают всех клиентов с этого маршрута, и у меня есть один метод получения, который фильтрует массив состояний по свойству id, и через этот метод получения я отображаю свои данные в моем представлении.
Express app:
router.route('/')
.get(async (req, res) => {
try {
const allcustomer = await db.query(`select * from Kunde`);
res.json(allcustomer.rows);
} catch (err) {
console.log(err);
res.json('An error occurred!');
}
})
Vuex:
const state = {
customers: [],
}
const getters = {
allcustomers: (state) => state.customers,
onecustomer: (state) => (id) => this.state.customers.filter(customer => customer.id = id)
}
const actions = {
async fetchcustomers({ commit }) {
const response = await axios.get('http://localhost:3000/customer');
commit('setcustomers', response.data);
},
}
const mutations = {
setcustomers: (state, customers) => (state.customers = customers),
}
Оба метода работают, и я получаю одинаковые результаты, но какой из этих способов лучший или это просто личное предпочтение?
но я заметил, что во втором решении я получаю сообщение об ошибке на моей консоли в моем браузере, что объект, на который я получил ответ, не определен, но данные отображаются так, как я хотел.
Я лично выбрал бы первое решение из-за сообщения об ошибке, которое кажется мне естественным.
Но что вы думаете?