如何分离基本相同但使用不同状态的功能？ Vue2/Vuex

Question

自从我意识到我违反了 DRY（不要重复自己）规则后，我遇到了一个问题。所以基本上我有 2 个模块（电影、电影院）和其中的一些方法，它们看起来相同但使用它们的模块状态。示例：电影具有 'movies' 状态。电影院有 'cinemas' 个状态。

      //cinemas.ts
    @Mutation
  deleteCinemaFromStore(id: string): void {
    const cinemaIndex = this.cinemas.findIndex((item) => item.id === id);
    if (cinemaIndex >= 0) {
      const cinemasCopy = this.cinemas.map((obj) => {
        return { ...obj };
      });
      cinemasCopy.splice(cinemaIndex, 1);
      this.cinemas = cinemasCopy;
    } else {
      throw new Error("Provided id doesn't exist");
    }
  }

   //movies.ts
@Mutation
  deleteMovieFromStore(id: string): void {
    const movieIndex = this.movies.findIndex((item) => item.id === id);
    if (movieIndex >= 0) {
      const moviesCopy = this.movies.map((obj) => {
        return { ...obj };
      });
      moviesCopy.splice(movieIndex, 1);
      this.movies = moviesCopy;
    } else {
      throw new Error("Provided id doesn't exist");
    }
  }

我的难题是：如果这些方法引用了 2 个不同的状态，我如何将它们分成 utils.ts？

Answer 1

定义另一个函数，将 id、state 和存储上下文 (this) 作为参数：

function delete(id:string,itemsName:string,self:any){

 const itemIndex= self[itemsName].findIndex((item) => item.id === id);
    if (itemIndex>= 0) {
      const itemsCopy = self[itemsName].map((obj) => {
        return { ...obj };
      });
     itemsCopy.splice(itemIndex, 1);
      self[itemsName] = itemsCopy;
    } else {
      throw new Error("Provided id doesn't exist");
    }
}

然后像这样使用它：

     //cities.ts
    @Mutation
  deleteCityFromStore(id: string): void {
   delete(id,'cities',this)
  }

  //countries.ts
@Mutation
  deleteCountryFromStore(id: string): void {
    delete(id,'countries',this)
}

如何分离基本相同但使用不同状态的功能？ Vue2/Vuex

How can I seperate functions which are basically the same but use different states? Vue2/Vuex

vue.js

vuex

vuejs2