javascript - Vuex没有返回预期状态

Question

如果用户没有交易，我有一个弹出模式应该出现。depositHistory是包含这些事务的数组。如果其长度大于 0，则弹出窗口应保持隐藏。如果其长度等于 0，则弹出窗口应呈现。

我正在使用的用户帐户有 2 笔交易。弹出窗口不应该显示，但确实如此。console.log()返回一个不正确的空数组。我有另一个其他人编写的组件，它depositHistory以相同的方式使用并且按预期工作。

零件：

<template>
  <div v-if='renderModal'>
    <p>Fund your account</p>
  </div>
</template>

<script>
const DepositGetter = namespace("deposit").Getter

const AppProps = Vue.extend({
data: () => {
  return {
    renderModal: false
  }
},
beforeMount() {
  // renders modal if user has no transactions
  if (this.depositHistory.length === 0) this.renderModal = true

  console.log(JSON.parse(JSON.stringify(this.depositHistory)))
  // usually returns [__ob__: Observer]
  // added JSON methods so now it logs []
}

export default class HomeGameBanner extends AppProps {
  @DepositGetter depositHistory
}
</script>

我认为你不需要这个，但以防万一。

店铺：

type DepositGetter = GetterTree<DepositState, RootState>;

export const getters: DepositGetter = {
  depositHistory: state => state.content
};

export const deposit: Module<DepositState, RootState> = {
  getters
}

标签： javascriptvue.jsfrontendvuex

Answer 1

数据对象在之后初始化，beforeMount因此尝试mounted 像这样执行

<template>
  <div v-if='renderModal'>
    <p>Fund your account</p>
  </div>
</template>

<script>
const DepositGetter = namespace("deposit").Getter

const AppProps = Vue.extend({
data: () => {
  return {
    renderModal: false
  }
},
mounted() {
this.$nextTick(function () {
  // renders modal if user has no transactions
  if (this.depositHistory.length === 0) this.renderModal = true

  console.log(JSON.parse(JSON.stringify(this.depositHistory)))
  // usually returns [__ob__: Observer]
  // added JSON methods so now it logs []
})
}

export default class HomeGameBanner extends AppProps {
  @DepositGetter depositHistory
}
</script>

前参考