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

Question

[postya]

имеется приложение на 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;
      }
}

Comments

[Andrey Vasilev]

ты ведь ничего не передаешь в метод sort, но при этом оно принимает значение (value)

[postya]

Andrey Vasilev, в метод sort у меня передается состояние из другого компонента(то есть чек бокс это компонент) да это и не важно, так как чекс бок верно передает состояния(проверял в консоли). Проблема именно в том,что именно после того как нажал сортировку, а почле этого отменил сортировку - данные не изменяются обратно

Answer 1

[Andrey Vasilev]

Завяжись на computed свойстве.
Оно будет отдавать сортированные или нет итемы, в зависимости, пусть даже от какого-нибудь булеан значения.
что-то вроде:

if (this.sorting) { 
 return this.SORT_MOVIES
} else {
 return this.NO_SORT_MOVIES
}

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

что-то вроде примера:

Comments

[postya]

а как должен вглдяеть метод NO_SORT_MOVIES() во vuex?
именно это мне и нужно,то есть этот метод должен как-то взять где-то оригинальный массив?

[Andrey Vasilev]

postya, ты получил список фильмов, потом в мутации записал отсортированный массив и не сортированный, после чего у тебя и будет в геттерах, допустим это:

SORT_MOVIES и NO_SORT_MOVIES

Цепочка:
Вызываешь действие -> Приходят фильмы -> Обрабатываются в мутации и записываются в хранилище -> Два геттера отдают соответствующие массивы.
Чтобы понять какой массив нам нужен, мы запиливаем вычисляемое (computed) св-во, которое перерасчитывается на основе Boolean значения.

[Andrey Vasilev]

postya, у тебя по сути оно и описано

SET_ALL_MOVIES: (state, movies) => {
      state.movies = movies.data.reverse(); // можно вот так реверснуть массив
      state.originalMovies = movies.data;
      state.isLoading = false;
    },

[Andrey Vasilev]

postya, дальше геттерами отдавай state.movies и state.originalMovies. ну и вот получается готовая схема практически.

[postya]

Попробовал вот так: но почему почвляется ошибка:

Expected to return a value in "sortedMovies" computed property

Хотя свойство sortBy изначально установлено в data:

data: () => ({
    sortBy: "default"
  }),

  computed: {
    ...mapGetters(["MOVIES"]),   
    sortedMovies() {
      if (this.sortBy === "title") {
        console.log(this.sortBy);
        return this.filterMoviesByTitle();
      }
      if (this.sortBy === "default") {
        console.log(this.sortBy);
        return this.MOVIES;
      }
    }
  },

filterMoviesByTitle() {
      const filteredArray = this.MOVIES.sort((a, b) =>
        a.title > b.title ? 1 : b.title > a.title ? -1 : 0
      );
      return filteredArray;
    }

[Andrey Vasilev]

postya, а ты дефолт из условия вынеси, всё равно св-во прервется, как только отдаст какое-то значение. а если ничего не отдаст, значит явно дефолт

[postya]

Сделал вот так, но почему-то при первой загрузке оба массива становятся отсортированными, хотя я положил сортированные данные только в массив sortedMoviesByTitle

mutations: {
    SET_ALL_MOVIES: (state, movies) => {
      state.originalMovies = movies.data;
      const sortedMovies = movies.data.sort((a, b) =>
        a.title > b.title ? 1 : b.title > a.title ? -1 : 0
      );
      state.sortedMoviesByTitle = sortedMovies;
      console.log(state.originalMovies);
      console.log(state.sortedMoviesByTitle);      
    }
  },

[Andrey Vasilev]

postya, попробуй может так: state.originalMovies = [...movies.data];

[postya]

Andrey Vasilev, ха) а вот так сработало)
Благодарю вас! вы мне очень помогли, результата достиг!

mutations: {
    SET_ALL_MOVIES: (state, movies) => {
      state.originalMovies = [...movies.data];
      const sortedMovies = movies.data;
      sortedMovies.sort((a, b) =>
        a.title > b.title ? 1 : b.title > a.title ? -1 : 0
      );
      state.sortedMoviesByTitle = sortedMovies;
      console.log(state.originalMovies);
      console.log(state.sortedMoviesByTitle);
      state.isLoading = false;
    }
  },

[Andrey Vasilev]

postya, да не за что)

[golentor]

А зачем такой сложный путь? На-лету сортировать массивы уже немодно типа?)..
Ну каждый хотя готовит код - по-своему)
Я могу догадываться.. что у автора массив по Гигабайту и он боится тратить много времени на динамичную сортировку)) Другое просто на ум не приходит)

[Andrey Vasilev]

golentor, ты про мой пример?)
я просто привёл пример двух массивов (второй уже реверс), конечно, так писать - это 3,14здец)