如何在Vue.js中结合Pinia遍历数组并删除指定元素？

原代码存在的问题 #

• 参数传递不匹配：removeMovie仅定义1个参数，但调用时传了2个冗余参数
• splice用法错误：第二个参数应为删除数量，而非目标元素值
• 遍历删除逻辑缺陷：正向遍历数组并删除元素会导致索引错乱，跳过后续元素
• 未遵循Pinia状态管理规范：直接在组件修改store状态虽可生效，但通过action维护状态更清晰

修正后的组件代码 #

Script部分

import { useMovieStore } from '@/stores/movie';
const store = useMovieStore();
const movieTitles = store.movieTitles;

function removeMovie(targetTitle) {
  // 定位目标元素的索引
  const targetIndex = movieTitles.findIndex(item => item === targetTitle);
  if (targetIndex !== -1) {
    // 从目标索引处删除1个元素
    movieTitles.splice(targetIndex, 1);
    console.log(movieTitles);
  }
}

HTML部分

<button 
  v-for="title of movieTitles" 
  :key="title" 
  @click="removeMovie(title)"
>
  删除 {{ title }}
</button>

更规范的Pinia Store实现方式 #

推荐在Pinia store中定义action来处理状态修改，符合单向数据流原则：

// stores/movie.js
import { defineStore } from 'pinia';

export const useMovieStore = defineStore('movie', {
  state: () => ({
    movieTitles: ['Puss in Boots: The Last Wish', 'The Menu']
  }),
  actions: {
    removeMovie(targetTitle) {
      const index = this.movieTitles.findIndex(title => title === targetTitle);
      index !== -1 && this.movieTitles.splice(index, 1);
    }
  }
});

组件中直接调用store的action即可：

<button 
  v-for="title of store.movieTitles" 
  :key="title" 
  @click="store.removeMovie(title)"
>
 删除 {{ title }}
</button>

内容的提问来源于stack exchange，提问作者Draganson