如何使用计算属性对本地存储的更改做出反应

Question

我正在使用组合 API 从本地存储中获取数据。

我正在将一个数组保存到本地存储中并从数组中添加/删除。

export function useCart() {
  const addToCart = (item) => {
    // eslint-disable-next-line no-debugger
    basketItem = JSON.parse(localStorage.getItem("basketArray")) || [];
    var newItem = {
      id: item.id,
      image: item.image,
      price: item.price,
      rating: item.rating,
      title: item.title,
    };
    basketItem.push(newItem);

    localStorage.setItem("basketArray", JSON.stringify(basketItem));
  };

我希望组件中的数组计数在新项目添加到本地存储中的数组时更新

我将计算属性用作：

import { computed } from "@vue/composition-api";
import { useCart } from "../../js/ShoppingCart";
// import Sidebar from "./Sidebar";
export default {
  setup() {
    const { basketItem } = useCart();

    let basketLength = computed(
      () => JSON.parse(localStorage.getItem("basketArray"))?.length
    );

    return { basketLength, basketItem };
  },
  name: "Navbar",
  components: {},
};

length 未按预期更改。它只在第一次加载，其他情况保持不变。

目标是让值对本地存储更改做出反应，同时将值设为computed()。

Answer 1

localStorage 是一种磁盘存储解决方案，它不会神奇地响应。如果您希望 basketItems 具有反应性。声明为ref：

import { ref } from '@vue/composition-api'

export function useCart() {
  const basketItems = ref([])
  const addToCart = (item) => {
    // eslint-disable-next-line no-debugger
    basketItems.value = JSON.parse(localStorage.getItem("basketArray")) || [];
    var newItem = {
      id: item.id,
      image: item.image,
      price: item.price,
      rating: item.rating,
      title: item.title,
    };
    basketItems.value.push(newItem);

    localStorage.setItem("basketArray", JSON.stringify(basketItems.value));
 };
 // remember to return basketItems here
 return { basketItems, addToCart }
}

然后在组件设置中：

setup() {
  const { basketItems, addToCart } = useCart();
  const basketLength = computed(() => basketItems.value.length);
  return { basketItems, basketLength, addToCart }
}

basketItems 和 basketLength 在这里都应该是响应式的，您可以通过 addToCart 方法将项目添加到汽车。