Блог

Вместо обновления текущего объекта в vuex-bindings создается новый. База данных представляет собой облачный firestore от Google.

Я использую Vue, vuex, vuetify, google-cloud-firestore и google-storage в своем приложении.

Это мой модуль хранилища для этой конкретной части:

 import { catsColl, productsColl } from '../firebase'

const state = {
  catOrProducts: [],
}

const mutations = {
  setCatProd(state, val) {
    state.catOrProducts = val
  },
}

const actions = {
  // https://vuefire.vuejs.org/api/vuexfire.html#firestoreaction

  // eslint-disable-next-line no-unused-vars
  async bindCatsWithProducts({ commit, dispatch }, CatID) {
    const contain = CatID || 'nC'
    const arr = []

    catsColl.where('parentCat', '==', contain).orderBy('name', 'asc')
      .onSnapshot(snap => {
        snap.forEach(cat => {
          arr.push({ id: cat.id, ...cat.data() })
        })
      })

    productsColl.where('isSold', '==', true).where('cats', 'array-contains', contain).orderBy('name', 'asc')
      .onSnapshot(snap => {
        snap.forEach(prod => {
          arr.push({ id: prod.id, ...prod.data() })
        })
      })

    commit('setCatProd', arr)
  },
}

export default {
  namespaced: true,
  state,
  actions,
  mutations,
}

  

Представление обрабатывается в моем компоненте внутри контейнера. Два компонента предназначены для продуктов и категорий, поскольку я хочу показать их по-разному.

 <v-container fluid>
  <v-row
    align="center"
    justify="center"
  >
    <v-col
      v-for="catOrProduct in catOrProducts"
      :key="catOrProduct.id"
      @click.prevent="leftClickProd($event, catOrProduct)"
      @contextmenu.prevent="rightClickProd($event, catOrProduct)"
    >
      <TileCat
        v-if="typeof(catOrProduct.parentCat) == 'string'"
        :src="catOrProduct.pictureURL"
        :name="catOrProduct.name"
      />
      <TileProduct
        v-if="catOrProduct.isSold"
        :name="catOrProduct.name"
        :src="catOrProduct.pictureURL"
        :store-inv="catOrProduct.storeInv"
        :warning-store-inv="catOrProduct.warningStoreInv"
        :min-store-inv="catOrProduct.minStoreInv"
        :bar-inv="catOrProduct.barInv"
        :warning-bar-inv="catOrProduct.warningBarInv"
        :min-bar-inv="catOrProduct.minBarInv"
        :is-used-directly="catOrProduct.isUsedDirectly"
        :is-active="catOrProduct.isActive"
        :sell-price="catOrProduct.sellPrice"
      />
    </v-col>
  </v-row>
</v-container>
  

РЕДАКТИРОВАТЬ 26.09.20

Два используемых там компонента (плитки) выглядят следующим образом (хотя продукт более сложный, с некоторым динамическим распределением классов)

 <template>
  <v-hover
    v-slot:default="{ hover }"
    class="unselectable"
  >
    <v-card :elevation="hover ? 6 : 2">
      <v-img
        class="white--text align-end"
        :src="src"
        gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)"
        aspect-ratio="1"
        height="17rem"
        contain
      >
        <v-card-title class="white--text ">
          {{ name }}
        </v-card-title>
      </v-img>
    </v-card>
  </v-hover>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: '@/assets/placeholder.png'
    },
  }
}
</script>
  

РЕДАКТИРОВАТЬ КОНЕЦ

Все выглядит нормально:

Когда я обновляю свой продукт (новая цена), он автоматически перезагружается, но обновления не происходит. Вместо этого он порождает второй объект.

Кроме [Vue warn]: Duplicate keys detected: 'TtUJJ0Agvd3DRBynmYgk'. This may cause an update error. того, появляется ошибка.

У меня "v-for" key правильно установлен идентификатор моего продукта / категории. Дубликатов нет. Я попытался запустить с

 v-for="(catOrProduct, index) in catOrProducts"
:key="index"
  

Но это только устраняет duplicated keys detected ошибку.
Все еще создаются объекты.

Я также удалил категории из уравнения, но даже без них я все равно получаю дубликаты.

Если я вношу больше изменений, он каждый раз создает новый объект! Перезагрузка всей страницы возвращается к отображению только правильного продукта, ошибка которого отсутствует в базе данных.

Как мне сделать так, чтобы привязка такого рода выполнялась правильно?