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>

</script>

当我加载网站时，我可以看到计算属性正在计算。但是，当我单击下面显示的 Home.vue 文件上的“添加到”按钮时，它应该

1. 调用 addToCart 方法

2. 依次从商店调度 addToCart 操作

3. 我在哪里计算 totalItems 并使用 setTotalItems 突变设置值

我面临的问题是，当我单击“添加到”按钮时，我可以看到 totalItems 的值在 localStorage 中更新，但它没有反映在 v-app-bar 组件中。只有当我导航到另一个页面然后返回主页时，它才会这样做。

当我通过将值存储在状态而不是 localStorage 中来实现时，它会正确反映，而无需导航到其他页面。

有没有办法在仍然使用 localStorage 而不是商店的同时实现这一目标

Answer 1

问题本地存储不是反应性的，因此您的吸气剂永远不会重新评估。解决方案 您可以重写您的 getter，以便它仅在状态尚未初始化时从本地存储中检索值。随后的调用应该直接访问该状态，因为您正在更改您的增变器中的状态，这将触发对您的 getter 的重新评估，从而触发您的计算属性：getters: {&nbsp; &nbsp; totalItems(state){&nbsp; &nbsp; &nbsp; if(state.totalItems.count < 0){&nbsp; &nbsp; &nbsp; &nbsp; return JSON.parse(window.localStorage.totalItems || '{count: 0}')&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return state.totalItems;&nbsp; &nbsp; }},然后您可以初始化您的countwith -1，因此 getter 的第一次评估将查看本地存储。通过在你的 getter 中引用这个totalItems属性，vue 知道只要这个属性改变就重新评估这个 getter。这里的缺点是，在第一次更改计数之前，您的 getter 和您的状态不会同步。您可能还可以通过调用 localStorage 来初始化您的状态，然后从 getter 中删除它。state: {&nbsp; &nbsp;totalItems: {&nbsp; &nbsp; &nbsp; count: JSON.parse(window.localStorage.totalItems || '{count: 0}')&nbsp; &nbsp;}},getters: {&nbsp; &nbsp; totalItems(state){&nbsp; &nbsp; &nbsp; return state.totalItems;&nbsp; &nbsp; }},好处：你的状态和吸气剂是同步的，但这也会让你的吸气剂变得多余。