Я получаю объект в моем приложении vue, используя топор ios. Предполагается, что структура объекта выглядит следующим образом:
result: [
{
entityState: 0,
id: 0,
name: "All",
isActive: false
},
{
entityState: 0,
id: 1,
name: "Phone",
isActive: false
},
{
entityState: 0,
id: 2,
name: "Computer",
isActive: false
},
{
entityState: 0,
id: 3,
name: "All,
isActive: true
},
]
, который я сохраняю в своем хранилище vuex следующим образом:
const store = new Vuex.Store({
state: {
stocks: [],
categories: [],
},
mutations: {
......
updateCategories(state, result) {
console.log('from updatecategories: ', result);
state.categories.splice(0, state.categories.length, ...result);
},
......
},
actions: {
.......
fetchCategories(context) {
axios.get('https://localhost:5001/categories').then(response => {
console.log('this is response', response);
const { result } = response.data;
context.commit('updateCategories', result);
});
},
........
},
});
, который я вызываю из своих компонентов следующим образом:
export default {
name: 'ProductsCatalogue',
data() {
return {
stocks: {},
};
},
components: {
SideBar,
ProductCard,
},
beforeMount() {
this.$store.dispatch('fetchCategories');
},
.....
};
, а затем использовать в другом компоненте, подобном этому:
<template>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li
v-for="(category, index) in categories"
v-bind:key="category.id"
:class="{ active: category.isActive }"
@click="
{
makeActive(category, index);
}
"
>
<a href="#">{{ category.name }}</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'SideBar',
.......
data() {
return {
categories: this.$store.state.categories,
};
},
.......
};
</script>
, но когда данные попадают в мое приложение, кажется, что vue заменяет значения каждого свойства объекта на геттеры и сеттеры, которые в свою очередь должны возвращать фактические значения, когда они необходимы. Это выглядит примерно так (когда console.logged):
result: (6) […]
0: Object { id: Getter & Setter, name: Getter & Setter, entityState: Getter & Setter, … }
1: Object { id: Getter & Setter, name: Getter & Setter, isActive: Getter & Setter, … }
2: Object { id: Getter & Setter, name: Getter & Setter, isActive: Getter & Setter, … }
3: Object { id: Getter & Setter, name: Getter & Setter, entityState: Getter & Setter, … }
length: 4
<prototype>: Array []
Проблема здесь в том, что когда я сохраняю эти данные в моем хранилище vuex и получаю к ним доступ из других частей приложения, он показывает что-то вроде этого:
result: [
{
entityState: undefined,
id: undefined,
name: "All",
isActive: undefined
},
{
entityState: undefined,
id: 1,
name: "Phone",
isActive: undefined
},
{
entityState: undefined,
id: 2,
name: "Computer",
isActive: undefined
},
{
entityState: undefined,
id: 3,
name: "All,
isActive: true
},
]
когда он на самом деле должен возвращать что-то вроде этого:
result: [
{
entityState: 0,
id: 0,
name: "All",
isActive: false
},
{
entityState: 0,
id: 1,
name: "Phone",
isActive: false
},
{
entityState: 0,
id: 2,
name: "Computer",
isActive: false
},
{
entityState: 0,
id: 3,
name: "All,
isActive: true
},
]
То есть он возвращает «неопределенное» для свойств, значения которых на самом деле должны быть 0 или false. Я пытался выяснить, почему это происходит в vue, но, похоже, в документации vue нет объяснения, поэтому я думаю, что в моем коде что-то не так. Мне нужен кто-то, чтобы помочь мне разобраться в этом.
Спасибо.