Vue устанавливает Undefined для свойств, значение которых должно быть 0 или false - PullRequest
Новая
       18

Vue устанавливает Undefined для свойств, значение которых должно быть 0 или false

0 голосов
/ 24 января 2020

Я получаю объект в моем приложении 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 нет объяснения, поэтому я думаю, что в моем коде что-то не так. Мне нужен кто-то, чтобы помочь мне разобраться в этом.

Спасибо.

1 Ответ

1 голос
/ 24 января 2020

Это не неопределенно, вы просто получаете доступ только к тем данным, к которым ваши категории не готовы, поэтому он говорит, что неопределенные неактивные данные не так ли? Чтобы решить эту проблему, сначала поставьте условие, чтобы предотвратить загрузку компонента, пока vuex готовит ваши категории. см. код ниже 

<ul class="sidebar-nav" v-if="$store.state.categories.length > 0">
        <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>

Или используйте watcher для обновления ваших категорий, когда vuex уже готов. 

watcher: {
    '$store.state.categories' : {
         this.categories = this.$store.state.categories
    },
}
...