Vue中的計算屬性不計算

Question

我有一個內置在 Vue 中的電子商務應用程序 (SPA)，下面是商店的快照

state: {
    cart: [],
    totalItems: {
      count: 0
    }
},
getters: {
    totalItems(){
      if(window.localStorage.totalItems){
        return JSON.parse(window.localStorage.totalItems)
      }
      else{
        let totalItems = { count: 0}
        return totalItems
      }
    }
},
mutations: {
    setCart(state, cart){
      state.cart = cart
      window.localStorage.cart = JSON.stringify(cart)
    },
    setTotalItems(state, totalItems){
      state.totalItems = totalItems
      window.localStorage.totalItems = JSON.stringify(totalItems)
    }
},
actions: {
    addToCart({ commit, getters }, productId){
      let cart = getters.cart
      let totalItems = getters.totalItems
      if(cart.length == 0){
        cart.push({id: productId, quantity: 1})
        totalItems.count++
      }
      else if(cart.find(({ id }) => id == productId)){
        let item = cart.find(({ id }) => id == productId)
        item.quantity++
        totalItems.count++
      }
      else{
        cart.push({id: productId, quantity: 1})
        totalItems.count++
       }
       commit('setCart', cart)
       commit('setTotalItems', totalItems)
    },
    setTotalItems({ commit }, totalItems){
      commit('setTotalItems', totalItems)
    }
}

在我的 App.vue 文件中如下 -

<template>
  <v-app>
    <v-app-bar
      app
      color="red"
      dark
    >
      <v-btn text to="/">Vue Shop</v-btn>

      <v-spacer></v-spacer>

      <v-btn text to="/cart">
        <v-badge v-if="totalItems.count" :content="totalItems.count"><v-icon>mdi-cart</v-icon></v-badge>
      </v-btn>

    </v-app-bar>

    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

<script>


export default {
  name: 'App',
  components: {
  },
  computed: {
    totalItems(){
      return this.$store.getters.totalItems
    }
  }
};
</script>

當我加載站點時，我可以看到計算的屬性正在計算。 但是，當我單擊下面顯示的 Home.vue 文件上的“添加到”按鈕時，它應該

1. 調用 addToCart 方法
2. 依次從商店分派 addToCart 操作
3. 我在哪里計算 totalItems 並使用 setTotalItems 突變設置值

我面臨的問題是，當我單擊“添加到”按鈕時，我可以看到 localStorage 中的 totalItems 的值已更新，但它並未反映在 v-app-bar 組件中。 只有當我導航到不同的頁面然后返回主頁時才會這樣做。

當我通過將值存儲在 state 而不是 localStorage 來實現時，它會正確反映，而無需導航到其他頁面。

有沒有辦法在仍然使用 localStorage 而不是商店的同時實現這一點

<template>
      <v-container>
        <v-row>
          <v-col v-for="product in products" :key="product.id">
            <v-card width="300" height="300">
              <v-img :src=product.imgUrl width="300" height="200"></v-img>
              <v-card-title>
                {{ product.name }}
              </v-card-title>
              <v-card-text>
                ${{ product.price }}
                <v-btn small class="ml-16 primary" @click="addToCart(product.id)">Add to <v-icon>mdi-cart</v-icon></v-btn>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </template>
    
    <script>
    
    
    export default {
      name: 'Home',
      components: {
      },
      computed: {
        products(){
          return this.$store.getters.products
        },
        cart(){
          return this.$store.getters.cart
        }
      },
      methods: {
        addToCart(id){
          this.$store.dispatch('addToCart', id)
        }
      }
    }
    </script>

Answer 1

問題本地存儲不是反應式的，因此您的吸氣劑永遠不會重新評估。

---

解決方案如果 state 尚未初始化，您可以重寫您的 getter，使其僅從本地存儲中檢索值。 隨后的調用應直接訪問 state，因為您正在更改您的 mutators 並且這將觸發您的 getter 的重新評估，因此您的計算屬性：

getters: {
    totalItems(state){
      if(state.totalItems.count < 0){
        return JSON.parse(window.localStorage.totalItems || '{count: 0}')
      }

      return state.totalItems;
    }
},

然后，您可以使用-1初始化您的count ，因此對 getter 的第一次評估將查看本地存儲。

通過在 getter 中引用totalItems屬性，vue 知道在該屬性更改時重新評估該 getter。

這里的缺點是，您的吸氣劑和您的 state 在第一次更改計數之前不會同步。

---

您可能還可以通過調用 localStorage 來初始化 state，並將其從 getter 中刪除。

state: {
   totalItems: {
      count: JSON.parse(window.localStorage.totalItems || '{count: 0}')
   }
},
getters: {
    totalItems(state){
      return state.totalItems;
    }
},

好處：您的 state 和吸氣劑是同步的，但這也使您的吸氣劑變得多余。