Vue 组件本地存储问题与解决方案：按钮文本不更新、删除功能不起作用

vue.js

2024-03-16 03:03:32

## Vue 组件中的本地存储：问题与解决方案

### 简介

在 Vue 组件中使用本地存储时，有时会遇到一些问题，例如按钮文本未更新或删除功能不起作用。本文将探讨这些问题并提供有效的解决方案。

### 问题一：按钮文本未更新

在点击按钮时，根据本地存储中的数据呈现内容时，按钮文本应相应更新。然而，在某些情况下，按钮文本可能不会更新，导致用户界面不一致。

### 解决方法

为了解决这个问题，可以使用一个计算属性来监听 favourites 数组。当数组发生变化时，计算属性会重新计算按钮文本，确保它始终反映本地存储中的数据。

### 问题二：删除功能不起作用

在从本地存储中删除项时，删除功能可能不起作用。这可能是由于 favourites 数组未正确更新。

### 解决方法

要启用删除功能，应使用数组的 splice 方法来删除指定的元素。通过在 toggleFavourites 方法中使用此方法，可以有效地从 favourites 数组中删除项。

### 修改后的组件

通过应用这些解决方案，修改后的 Vue 组件代码如下：

<template>
  <div class="card">
    <div>
      <img :src="image" alt="character-image"/>
    </div>

    <div class="cardInfo">
      <p class="cardTitle">{{ name }}</p>

      <span>{{ species }}</span> - <span>{{ status }}</span>

      <Button
          :buttonText="buttonText"
          class="addToFavouritesBtn"
          @click="toggleFavourites"
      >
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, computed } from "vue";
  import Button from '../components/Button.vue';
  import useLocalStorage from '../utils/useLocalStorage';

  const props = defineProps<{
    characterData: {
      id: string,
      name: string,
      image: string,
      species: string,
      status: string
    }
  }>();

  const { id, name, image, species, status } = props.characterData;
  const favourites = useLocalStorage([], 'favouriteCharacters');

  const buttonText = computed(() => {
    return favourites.value.some(character => character.id === id) ? 'Remove from Favourites' : 'Add to Favourites';
  });

  const toggleFavourites = () => {
    const index = favourites.value.findIndex((character) => character.id === id);

    if (index === -1) {
      console.log(1)
      // Not in favourites, add it
      favourites.value.push(props.characterData);
    } else {
      console.log(2)
      // Already in favourites, remove it
      favourites.value.splice(index, 1);
    }
  };
</script>