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文件中调用此突变时显示此getter值。我在文件名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))

想要在另一个组件中显示更新的状态值

1 个答案: