@postya

Как сделать toggle сортировки во Vue с vuex?

имеется приложение на Vue
Нужно при клике на чекбокс применять сортировку или отменять её.
в методе created() я вызываю action во vuex. Этот action делает запрос на API и сохраняет данные в массив.
Я сделал,чтобы данные сохранялись в ещё один массив. Типо дубликат,чтобы в оригинальном массиве были данные без сортировки.

Проблема в том,что когда отменяю сортировку(убираю из чекбокса галку) данные не изменяются на оригиналдьные, а остаются отсортированными.
Как это изменить?

VUEX:
export default new Vuex.Store({
  state: {
    originalMovies: [],
    movies: [],
    sortBy: "default",
    isLoading: true,
  },
  mutations: {
    SET_ALL_MOVIES: (state, movies) => {
      state.movies = movies.data;
      state.originalMovies = movies.data;
      state.isLoading = false;
    },
    SET_SORTED_MOVIES: (state, sortKey) => {
      if (sortKey === "title") {
        const movies = state.movies;
        state.originalMovies = state.movies;
        movies.sort((a, b) => {
          let compare = 0;
          if (a[sortKey] > b[sortKey]) {
            compare = 1;
          } else if (b[sortKey] > a[sortKey]) {
            compare = -1;
          }
          return compare;
        });
        state.originalMovies = movies;
      }

      if (sortKey === "default") {
        state.originalMovies = state.movies;
      }
    }
  },

  actions: {
    async GET_ALL_MOVIES({ commit }) {
      await axios
        .get(API_URI)
        .then(response => {
          commit("SET_ALL_MOVIES", response.data);
        })

        .catch(error => {
          console.log(error);
          return error;
        });
    },

    SORT_MOVIES({ commit }, sortKey) {
      console.log(sortKey);
      commit("SET_SORTED_MOVIES", sortKey);
    }
  },
  getters: {
    MOVIES(state) {
      return state.originalMovies;
    }
  }
});


Компонент:
<Sorting @click="sort" />

<div  v-for="movie in MOVIES>
<p movie.title>
<p movie.description>
</div>

computed: {
    ...mapGetters(["MOVIES"])
}
created() {
    this.GET_ALL_MOVIES();
  },

methods: {
...mapActions(["GET_ALL_MOVIES", "SORT_MOVIES"]),
sort(value) {
      switch (value) {
        case "name":          
          this.SORT_MOVIES("title");
          break;      
        case false:
          this.SORT_MOVIES("default");  
          break;
      }
}
  • Вопрос задан
  • 77 просмотров
Решения вопроса 1
Nolis
@Nolis
it-гопник
Завяжись на computed свойстве.
Оно будет отдавать сортированные или нет итемы, в зависимости, пусть даже от какого-нибудь булеан значения.
что-то вроде:
if (this.sorting) { 
 return this.SORT_MOVIES
} else {
 return this.NO_SORT_MOVIES
}

sotring меняй по клику, да и всё
если дело в чекбоксе, то сделай какой-нибудь элемент и попробуй повязать клик на него

что-то вроде примера:
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы