使用 Vuex 添加项目后如何更新列表

Question

我对 Vuex 还很陌生，并试图在以后的实际项目中实现它。为此，我设置了一个简单的应用程序，您可以在其中将商品添加到购物车。到目前为止一切正常，但组件在添加项目后不会更新其数据。

这是我目前的代码，这里是组件 Home.vue：

<template>
  <div class="home">
    <div v-for="product in cart" :key="product.name">
      {{product.name}}
    </div>
    <div v-for="product in products" :key="product.name">
        {{product.name}}
        <button @click="addToCart(product)">Add to cart</button>
    </div>
  </div>
</template>

<script>
export default {
  /* eslint-disable */
  name: 'Home',
  data () {
    return {
      products: [
        {
          name: 'Appeltaart',
          price: '20.00'
        },
        {
          name: 'Chocoladetaart',
          price: '15.40'
        }
      ],
    }
  },
  computed: {
    cart() {
      return localStorage.getItem('cart')
    }
  },
  beforeMount() {
    console.log(localStorage.getItem('cart'))
  },
  methods: {
    addToCart(product) {
      this.$store.commit('addToCart', product)

      console.log(this.$store.state.cart)
    },
  }
}
</script>

这里是 Vuex 文件，index.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  /* eslint-disable */
  state: {
    cart: [],
    newCartItem: {
      name: '',
      price: 0,
      quantity: 0,
    },
  },
  mutations: {
    addToCart (state, product) {
      state.newCartItem.name = product.name
      state.newCartItem.price = product.price
      state.newCartItem.quantity = 1
      state.cart.push(state.newCartItem)
      localStorage.setItem('cart', JSON.stringify(this.state.cart))
      state.newCartItem = {}
    }
  },
  actions: {
  },
  modules: {
  }
})

如您所见，我目前正在使用计算数据，但显然它不起作用。我该如何完成这项工作？

提前致谢！

Answer 1

我很确定这是因为您正试图将您的物品从“localStorage”中取出。你为什么不在你的州做一个吸气剂，然后从那里拿车？

例子：

你的计算可以用这个代替：

computed: {
    cart() {
      return this.$store.getters.getCart;
    }
  },

您的 Vuex index.js 将如下所示（唯一的变化是“getters”部分）

export default new Vuex.Store({
  /* eslint-disable */
  state: {
    cart: [],
    newCartItem: {
      name: '',
      price: 0,
      quantity: 0,
    },
  },
getters: {
    getCart(state) { 
        return state.cart;
    }
}
  mutations: {
    addToCart (state, product) {
      state.newCartItem.name = product.name
      state.newCartItem.price = product.price
      state.newCartItem.quantity = 1
      state.cart.push(state.newCartItem)
      localStorage.setItem('cart', JSON.stringify(this.state.cart))
      state.newCartItem = {}
    }
  },
  actions: {
  },
  modules: {
  }
})

现在我猜您正在使用 LocalStorage 在您的 Vuex 存储中进行某种形式的持久性，但我建议您使用：https://www.npmjs.com/package/vuex-persistedstate。这样您就可以在本地存储中备份您的 Vuex（因此在刷新等之后仍然可以访问它......），但您仍然可以使用我用来获取数据的技术