from 'vuex';
                  
                  
                  
                  
                  
                      const statusBgs = {
                  
                  
                          'success': 'bg-green',
                  
                  
                          'error': 'bg-red',
                  
                  
                          'recognition': 'bg-aqua',
                  
                  
                          '': 'bg-yellow'
                  
                  
                      };
                  
                  
                      const statusIcons = {
                  
                  
                          'success': 'fa-check',
                  
                  
                          'error': 'fa-times',
                  
                  
                          'recognition': 'fa-cog fa-spin',
                  
                  
                          '': 'fa-spinner fa-spin'
                  
                  
                      };
                  
                  
                      const statusWords = {
                  
                  
                          'success': 'Обработка завершена',
                  
                  
                          'error': 'Завершилось с ошибкой',
                  
                  
                          'recognition': 'Идет обработка',
                  
                  
                          'uploaded': 'Ждет обработки',
                  
                  
                          '': 'Загрузка данных'
                  
                  
                      };
                  
                  
                  
                  
                  
                      export default {
                  
                  
                          name: "Status",
                  
                  
                          data: function() {
                  
                  
                              return {
                  
                  
                                  isRestarted: false
                  
                  
                              }
                  
                  
                          },
                  
                  
                          computed: {
                  
                  
                              bgClass: function () {
                  
                  
                                  const status = this.image ? this.image.status : null;
                  
                  
                                  return status && statusBgs[status] !== undefined ? statusBgs[status] : statusBgs[''];
                  
                  
                              },
                  
                  
                              iconClass: function () {
                  
                  
                                  const status = this.image ? this.image.status : null;
                  
                  
                                  return status && statusIcons[status] !== undefined ? statusIcons[status] : statusIcons[''];
                  
                  
                              },
                  
                  
                              word: function () {
                  
                  
                                  const status = this.image ? this.image.status : null;
                  
                  
                                  return status && statusWords[status] !== undefined ? statusWords[status] : statusWords[''];
                  
                  
                              },
                  
                  
                              ...mapState({image: state => state.image})
                  
                  
                          },
                  
                  
                          methods: {
                  
                  
                              makeRestart() {
                  
                  
                                  this.isRestarted = true;
                  
                  
                                  this.restart();
                  
                  
                                  setTimeout(() => this.isRestarted = false, 5000);
                  
                  
                              },
                  
                  
                              ...mapActions(['restart'])
                  
                  
                          }
                  
                  
                      }
                  
                  
                  </script>
                  
                  
                  А в store.js:
                  
                  
                  ```
                  
                  
                  Vue.use(Vuex);
                  
                  
                  
                  
                  
                  const processingStatusses = ['uploaded', 'recognition'];
                  
                  
                  
                  
                  
                  const store = new Vuex.Store({
                  
                  
                      state: {
                  
                  
                          id: null,
                  
                  
                          image: null,
                  
                  
                          ...: null
                  
                  
                      },
                  
                  
                      mutations: {
                  
                  
                          init(state, id) {
                  
                  
                              state.id = id;
                  
                  
                          },
                  
                  
                          image(state, data) {
                  
                  
                              state.image = data;
                  
                  
                          },
                  
                  
                          ....(state, data) {
                  
                  
                              state.... = data;
                  
                  
                          }
                  
                  
                      },
                  
                  
                      actions: {
                  
                  
                          async init({commit, dispatch}, id) {
                  
                  
                              commit('init', id);
                  
                  
                              await dispatch('load....');
                  
                  
                              await dispatch('load');
                  
                  
                          },
                  
                  
                          async load({state, commit, dispatch}) {
                  
                  
                              try {
                  
                  
                                  const res = await request.get(/images/show/${state.id});
                  
                  
                                  commit('image', res.data);
                  
                  
                                  if (processingStatusses.indexOf(res.data.status) !== -1)
                  
                  
                                      setTimeout(() => dispatch('load'), 1000);
                  
                  
                              }
                  
                  
                              catch (error) {
                  
                  
                                  dispatch('error', {message: 'Произошла сетевая ошибка, попробуйте еще раз', error});
                  
                  
                              }
                  
                  
                          },
                  
                  
                          async restart({state, dispatch}) {
                  
                  
                              await request.post(/images/restart/${state.id}/);
                  
                  
                              dispatch('load');
                  
                  
                          },
                  
                  
                
Да пиздец, чо это за простыня
Я вот тоже думаю: конечная цель у меня админка; если на каждую модель будет столько стейтов и геттеров, будет же жесть)
Обсуждают сегодня