使用 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（所以它在刷新等之后仍然可以访问......）但是你仍然可以使用我用来获取数据的技术

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

How can I update the list after I've added an item using Vuex

vue.js

vuex

vuejs2