хотите показать обновленное значение состояния в другом компоненте


хотите показать обновленное значение состояния в другом компоненте

20.10.2019 07:40:01 Просмотров 95 Источник

я хочу посмотреть, когда мутация вызвала и обновила статус. я делаю компонент, чтобы показать количество таблиц базы данных при вызове api.

это мой магазин я написал

const state = {
    opportunity: ""
}

const getters = {
    countOpportunity: state => state.opportunity
}

const actions = {
    // count opportunity
    async totalOpportunity({ commit }) {
        const response = await axios.get(count_opportunity)
        commit("setOpportunity", response.data)
    },
}

const mutations = {
    setOpportunity: (state, value) => (state.opportunity = value)
}

я хочу показать это значение геттера, когда эта мутация вызывается в другой возможности имени компонента.файл Vue. я показал значения количества баз данных в Панели Управления именем файла.вю

я написал это так.

computed: {
    ...mapGetters(["countOpportunity"])
  },
  watch: {},
  mounted() {
    //do something after mounting vue instance
    this.$store.watch(() => {
      this.$store.getters.countOpportunity;
    });
  },
  created() {
    this.totalOpportunity();
  },
  methods: {
    ...mapActions(["totalOpportunity"])
  }

и показал мой взгляд вот так.

<div class="inner">
 <h3>{{ countOpportunity }}</h3>
 <p>Opportunities</p>
</div>

когда api вызывается и увеличение количества показывает мои мутации. но мое значение представления не обновляется (countOpportunity). любой может помочь мне исправить это.


Ответы - хотите показать обновленное значение состояния в другом компоненте / want to show updated status value in another component

Ohgodwhy

20.10.2019 08:04:17

Проблема здесь (скорее всего) заключается в том, что значение response.data - это объект или массив. Вы изначально определили возможность Как ''которая не является наблюдаемым объектом или массивом. У вас есть 2 варианта:

Переопределите его как пустой объект или массив, в зависимости от ответа:

opportunity: [] // or {}

В противном случае используйте Vue.set()для применения реактивности при ее изменении:

(Vue.set(state, 'opportunity', value))
https://stackoverflow.com/questions/58475096/want-to-show-updated-status-value-in-another-component/58475310#comment103284481_58475310
я попытался установить возможность как свойство. но то же самое, что и моя проблема. как я могу использовать Vue set
Помочь в развитии проекта:
Закрыть X