google-cloud-firestore - 我无法在组件模板中显示 vuex 状态值

Question

我正在使用可组合函数从 Firestore 中获取文档。我已导入返回到 Vuex 商店的对象。当我在我的组件中访问该 firestore 对象时，我意识到它被包裹在 a 中ComputedRefImpI{ }，并且我无法在模板标签中显示值。

这是我的商店/index.js

import { createStore } from 'vuex'
import getCollection from '../composables/getCollection'

function UpdateLocalStorage(cart){
localStorage.setItem('cart', JSON.stringify(cart))
}

export const store = createStore({
state: {
  cart: [],
  all: [],
  error: null
},
getters: {
  cartProducts (state) {
    return  state.cart
  }
}, 
mutations: {
  
  productQuantityInCart (state, product) {
    const item = state.cart.find(i => i.id === product.id)
  
    if(item)  return item.quantity
    else return null
  },
  addToCart (state, product) {
    let item = state.all.find(i => i.id === product.id)
    
    if(item) {
      item.quantity++
    } else {
      state.cart.push({...product, quantity:1})
    }

    UpdateLocalStorage(state.cart)
  },
  setAllOffersFromDB (state) {
    const { documents, error } = getCollection('allOffers')

    if(!documents) {
      state.error = error
    } else {
      state.all = documents
      
    }
  },
  removeFromCart (state, payload) {
    let product = payload
    let item = state.cart.find(i => i.id === product.id)
  
    if(item.quantity > 1) {
      return null
    } else {
      state.cart.filter(i => i.id !== product.id)
      
    }
    UpdateLocalStorage(state.cart)
  },
  cartTotal (state) {
    let total = 0
    state.cart.forEach(i => {
      total += i.quantity * i.price
    })
    return total
  },
  updateCartFromLocalStorage (state) {
    const cart = localStorage.getItem('cart')

    if(cart) {
      state.cart = JSON.parse(cart)
    }
  }
  
},
actions: {
  productQuantity (context, product) {
    context.commit('productQuantityInCart', product)
  }
}

})

这是Cart.vue

<template>
      {{ cartProdcts }} // displays all values as shown in the picture attached

      <div v-for="product in cartProducts" :key="product.id">
        {{ product.title }}     // this value is blank inside browser
        {{ product.subtitle }}  // this value is blank inside browser
        {{ product.price }}     // this value is blank inside browser
     </div>
  </template>

  <script>
  import { computed, ref } from 'vue'
  import {useStore}  from 'vuex'
  export default {
   setup() {
    const store = useStore()
    const cartProducts = computed(() => store.getters.cartProducts)
    
    return { cartProducts}
  }
}

当我控制台记录 Cart.vue 中的 getter.cartProducts 时，正确的值显示如附图所示，但我无法在模板标签中显示值

标签： google-cloud-firestorevuexvuejs3fluxvue-composition-api

Answer 1

setup 方法已经返回模板变量，可以在模板中使用，不需要在计算中添加，vuex 是数据流的一种方式。您可以从 store 中获取值暴露给模板。不使用计算此修复问题

<script>


import { computed, ref } from 'vue'
  import {useStore}  from 'vuex'
  export default {
   setup() {
    const store = useStore()
    const cartProducts = store.getters.cartProducts; //  no need to use compute
    
    return { cartProducts}
  }
}
</script>