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

Question

Я хочу посмотреть, когда вызывается мутация и обновляется статус. я делаю компонент, чтобы показать количество таблиц базы данных при вызове 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)
}

Я хочу показать это значение получателя, когда эта мутация вызывается в файле Opportunity.vue с именем другого компонента. я показал значения счетчика базы данных в имени файла Dashboard.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). любой может помочь мне исправить это.

Answer 1

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

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

opportunity: [] // or {}

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

(Vue.set(state, 'opportunity', value))