Question

我想在Vue JS 2中将localStorage添加到我的购物车应用程序，以便在用户重新加载页面时将项目保存在购物车中，并在用户点击+或 - 按钮时保存项目数量。我怎样才能做到这一点？我是VueJS的新人。我试过通过将itemStorage.fetch（）添加到购物车组件来解决它，但它不起作用。

这是我到目前为止所拥有的。不幸的是，我没有把它分成更小的组件:(

＆＃13;

const apiURL = 'https://api.myjson.com/bins/1etx1x';

const STORAGE_KEY = 'vue-js-todo-P7oZi9sL'
let itemStorage = {
  fetch: function() {
    let items = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    return items;
  },
  save: function(items) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
    console.log('items saved')
  }
}

Vue.filter('addCurrency', val => val.toFixed(2) + ' $');

Vue.component('shopping-cart', {
  props: ['items'],
  data: function() {
    return {
      //item: this.items
      item: itemStorage.fetch()
    };
  },
  watch: {
    items: {
      handler: function(items) {
        itemStorage.save(items);
      }
    }
  },
  computed: {
    total: function() {
      let total = 0;
      this.items.map(item => {
        total += (item.price * item.quantity);
      });
      return total;
    }
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1)
    },
    addOne: item => {
      item.quantity++;
    },
    subtractOne: item => {
      item.quantity--;
    },
    removeAll() {
      return this.item.splice(0, this.item.length);
    }
  }
});

const vm = new Vue({
  el: '#shop',
  data: {
    cartItems: [],
    //items: [],
    items: itemStorage.fetch(),
    addToCartBtn: 'Add to cart',
    showCart: false,
    isInCart: 'In cart',
    search: '',
    sortType: 'sort',
    sortOptions: [{
        text: 'choose',
        value: 'sort'
      },
      {
        text: 'name',
        value: 'name'
      },
      {
        text: 'price',
        value: 'price'
      }
    ]
  },
  created: function() {
    this.fetchData();
  },

  computed: {
    products: function() {
      return this.items.filter(item => item.name.toLowerCase().indexOf(this.search.toLowerCase()) >= 0);
    }
  },
  methods: {
    fetchData() {
      axios.get(apiURL)
        .then(resp => {
          this.items = resp.data
        })
        .catch(e => {
          this.errors.push(e)
        })
    },
    sortBy(sortKey) {
      this.items.sort((a, b) =>
        (typeof a[sortKey] === 'string' || typeof b[sortKey] === 'string') ? a[sortKey].localeCompare(b[sortKey]) : a[sortKey] - b[sortKey]);
    },
    toggleCart: function() {
      this.showCart = !this.showCart;
    },
    addToCart(itemToAdd) {
      let found = false;
      this.showCart = true;
      this.cartItems.map(item => {
        if (item.id === itemToAdd.id) {
          found = true;
          item.quantity += itemToAdd.quantity;
        }
      });
      if (found === false) {
        this.cartItems.push(Vue.util.extend({}, itemToAdd));
      }
      itemToAdd.quantity = 1;
    },
    itemInCart(itemInCart) {
      let inCart = false;
      this.cartItems.map(item => {
        if (item.id === itemInCart.id) {
          inCart = true;
        }
      });
      if (inCart === false) {
        return this.isInCart;

      }
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.16.2/dist/axios.min.js"></script>

＆＃13;

Answer 1

您可以使用localStorage.getItem（）和localStorage.setItem（），但根据我的经验，使用localStorage对Vue不起作用。我会遇到各种奇怪的，无法解释的问题。我认为这还不够快。您应该考虑使用Vuex并设置Vuex persisted state以自动将其同步到会话/本地存储。

Answer 2

要保持状态，您可以像这样使用插件vue-persistent-state：

import persistentStorage from 'vue-persistent-storage';

const initialState = {
  items: []
};
Vue.use(persistentStorage, initialState);

现在items可用作所有组件和Vue实例中的数据。对this.items的任何更改都将存储在localStorage中，您可以像使用vanilla Vue应用程序一样使用this.items。

如果您想了解其工作原理，the code非常简单。它基本上是

添加mixin以使initialState在所有Vue实例中都可用，并
注意变化并存储它们。

免责声明：我是vue-persistent-state的作者。

将localStorage添加到Vue JS 2应用程序

2 个答案: