0

Всем привет,у меня есть вот такой поиск по элементов и получение данных из api в компоненте,не могу понять,как вынести это в экшены стора,хотябы только обращение к api,объясните пожалуйста,и как он должен потом диспачится в компоненте

export default {
  data() {
    return {
      search: '',
      info: null,
      selected: null,
    };
  },
  computed: {
    filteredCars() {
      let result = this.info;
      if (this.search) {
        result = result.filter((item) => {
          if (item.car.make.indexOf(this.search) !== -1
            || item.car.model.indexOf(this.search) !== -1
            || item.car.licensePlate.indexOf(this.search) !== -1
            || item.car.vin.indexOf(this.search) !== -1
            || item.client.clientName.indexOf(this.search) !== -1) {
            return item;
          }
        });
      }
      return result;
    },
  },
  mounted() {
    axios.get('api/v1/contracts', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('user-token')}`,
      },
    })
      .then(response => (this.info = response.data));
  },
};

1 ответ 1

1

Если Вам нужно глобальное состояние, то для этого нужен vuex, если надо только отобразить что-то в одном компоненте, то сойдет так как у Вас написано сейчас.

Если окончательно решили использовать vuex, то создайте state с нужным свойством с которым надо работать:

state: {
  contracts: null // Вы получаете с api
}

И мутацию - только она может менять состояние хранилища:

mutations: {
  setContracts (state, payload) {
    state.contracts = payload
  }
}

Дальше т.к. Вы используете api для получения данных, то нужно создать действие которое записывает contracts

actions: {
  setContracts ({ commit }) {
    axios.get('api/v1/contracts', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('user-token')}` // не лучшая практика везде повторять встаку хедера авторизации
      },
    }).then(response => {
      // вызывает мутацию
      commit('setContracts', response.data) // нужно создать мутацию setContracts
    });
  }  
}

В компоненте можно вызвать вот так:

mounted () {
  this.$store.dispatch('setContracts')
}

И наконец можете создать геттер, который возвращает отфильтрованные данные:

getters: {
  filteredCars: (state) => (search) => { // такая конструкция потому что надо передать параметр
    let result = state.contracts

    if (search) {
      result = result.filter((item) => {
        if (item.car.make.indexOf(search) !== -1
          || item.car.model.indexOf(search) !== -1
          || item.car.licensePlate.indexOf(search) !== -1
          || item.car.vin.indexOf(search) !== -1
          || item.client.clientName.indexOf(search) !== -1) {
          return item;
        }
      });
    }

    return result;
  }
}

Использование:

  computed: {
    filteredCars () {
      return this.$store.getters.filteredCars(this.serach) // передали строку поиска
    }
  } 

Код не проверял, могут быть мелкие ошибки.

Детальное описание концепций хранилища в офф. документации.

2
  • Спасибо большое,помогли очень) Да,мелка ошибка тут была, return store.getters.filteredCars
    – user294431
    31 авг 2018 в 7:59
  • Я рад) Исправил, спасибо. 31 авг 2018 в 8:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.