Vue.js Изменение состояния Vuex не перерисовывает шаблон с помощью v-if - PullRequest
Новая
       17

Vue.js Изменение состояния Vuex не перерисовывает шаблон с помощью v-if

0 голосов
/ 13 мая 2018

Я пытался установить значение v-if в computed, данные, передаваемые как реквизиты, и просто как прямую ссылку на состояние, но оно НИКОГДА не рендерится, несмотря на то, что проверяемое состояние изменяется на true.

В настоящее время у меня есть прямая ссылка на магазин 

<template v-if="this.$store.state.showReviews">

Я выполняю запрос AJAX в своем действии Vuex 

getBikeReviews(context, i){
  console.log("getBikeReviews");
  axios.get('http://mpaccione.com/wp-content/themes/webdev/projects/Web_Design_4/Creating_Online_Store/api/get_reviews.php?index='+i).then((res) => {
    context.commit('storeBikeReviews', {"index": i, "json": res.data});
    context.commit('showReviews', true);
  });
}

Государство мутирует на истину 

showReviews (state, payload){
  console.log("showReviews");
  state.showReviews = payload;
}

Однако шаблон никогда не рендерится.

1 Ответ

0 голосов
/ 14 мая 2018

Вы пытались использовать методы получения или вычисленные значения? 

computed: {
  showReviews() {
    return this.$store.state.reviews || []
  },
  reviews() {
    return this.$store.state.showReviews === true
  }
}

также неплохо использовать Vue. $ Set всякий раз, когда это возможно, вместо простого присваивания. 

Import Vue from 'vue';

showReviews (state, payload){
  Vue.$set(state, 'showReviews', payload);
}

в то время какэто может не решить проблему с некоторыми типами значений, ИМХО, это хорошая идея, чтобы просто применять все время, так что вы не забудьте тот, который действительно нуждается в этом.

наконец, если вы действительноизо всех сил пытаясь получить реактивность, вы можете вызвать повторный рендеринг, вызвав this.$forceUpdate(); (или Vue.$forceUpdate();) после вашей мутации

...