Блог

У меня есть компонент v-alert, который отобразит / закроет базу в магазине Vuex — он установит ошибку — и очистит ее через 4s!

И вот мой компонент V-alert:

Проблема в том, что оно :value не работает, когда getError становится null

Если я хочу, чтобы мое V-оповещение исчезло, когда getError есть null , я должен использовать v-if

Мой обходной путь в порядке, но я все еще путаю :value здесь

Есть ли ошибка или я где-то ошибаюсь?

 <template>
  <v-alert
    :value ="!!getError" // <~~~ Problem here

    transition="scroll-x-transition"

    :type="getError.type"
    :dismissible="$vuetify.breakpoint.mdAndUp"
    dense
    :prominent="$vuetify.breakpoint.mdAndUp"
    class="TrnAlert rounded-tr-xl rounded-bl-xl text-center text-caption text-md-body-1"
    @input="[CLEAR_ERROR]"
  >
    {{ getError.message }}
  </v-alert>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';

  import { CLEAR_ERROR } from '../../store/type/actions';

  export default {

    computed: {
      ...mapGetters(['getError']),
    },

    methods: {
      ...mapActions([CLEAR_ERROR]),
    },
  };
</script>

<style scoped></style>


  

Вот мой магазин — он установит ошибку — и очистит ее через 4s

 import { UPDATE_ERROR, REMOVE_ERROR } from '../type/mutations';
import { SET_ERROR, CLEAR_ERROR } from '../type/actions';

const state = () => ({
  error: null,
});

const getters = {
  getError: (state) => state.error,
};

const actions = {
  [SET_ERROR]({ commit }, payload) {
    commit(UPDATE_ERROR, payload);
    setTimeout(() => {
      commit(REMOVE_ERROR);
    }, 4000);

  },
  [CLEAR_ERROR]({ commit }) {
    commit(REMOVE_ERROR);
  },
};

const mutations = {
  [UPDATE_ERROR]: (state, payload) => {
    state.error = { message: payload.message, type: payload.type || 'error' };
  },
  [REMOVE_ERROR]: (state) => {
    state.error = null;
  },
};

export default {
  state,
  actions,
  mutations,
  getters,
};

  

Большое спасибо @User28 за его / ее ценный рабочий фрагмент кода, это помогает мне сравнить и выяснить, что случилось с моим глупым кодом,

Оказывается, когда ошибка была удалена в хранилище, это сделало state.error = null;

а затем допускает ошибки :type="getError.type" и getError.message , потому что :

[Предупреждение Vue]: Ошибка при рендеринге: «TypeError: не удается прочитать свойство ‘type’, равное null»

[Предупреждение Vue]: Ошибка при рендеринге: «TypeError: не удается прочитать свойство ‘message’ неопределенного»

Я могу изменить хранилище таким образом, чтобы исправить ошибку:

 
const state = () => ({
  error: {
    message: undefined,
    type: undefined,
  },
});

// ...


const mutations = {
// ...

  [REMOVE_ERROR]: (state) => {
    state.error = {
      message: undefined,
      type: undefined,
    };
  },
};

...