Vuex State预取失效：组件computed首次映射返回Null

这个问题我之前也碰到过，你的推测完全正确——就是因为Vuex的dispatch是异步操作，组件初始化时computed会立刻执行计算，但这时候你的registerWeb3和getContractInstance这两个异步dispatch还没完成，state里的对应值还是初始的null，所以才会出现首次映射返回null的情况。给你几个实用的解决方案：

• 给State设置合理的初始值
  先从根源上优化，把Vuex中web3模块的state初始值设为符合业务场景的默认值，而不是null。比如如果coinbase是字符串类型，初始值设为空字符串；balance是数字类型，初始值设为0：

  // Vuex的web3模块state
  const state = {
    coinbase: '',
    balance: 0
  }
  

  这样首次computed映射时至少不会返回null，页面渲染更友好。

• 等待dispatch完成后再渲染依赖状态的内容
  用async/await配合加载状态，确保异步操作完成后再渲染需要状态的部分。修改你的组件代码：

  export default {
    name: 'tab_3',
    data () {
      return {
        tableData: [],
        isLoaded: false // 新增加载状态标记
      }
    },
    async beforeCreate () {
      // 等待两个dispatch都执行完成
      await Promise.all([
        this.$store.dispatch('registerWeb3'),
        this.$store.dispatch('getContractInstance')
      ])
      this.isLoaded = true
    },
    computed: mapState({
      coinbase: state => state.web3.coinbase,
      balance: state => state.web3.balance
    })
  }
  

  然后在模板里用v-if控制渲染：

  <template>
    <div v-if="isLoaded">
      <p>当前账户：{{ coinbase }}</p>
      <p>账户余额：{{ balance }}</p>
      <!-- 其他依赖状态的内容 -->
    </div>
    <div v-else>
      加载中...
    </div>
  </template>
  

  注意：这里要确保你的action函数返回Promise（如果是async函数会自动返回Promise），否则await不会生效。比如你的action可以这么写：

  // Vuex的web3模块action
  async registerWeb3({ commit }) {
    // 假设initWeb3是异步初始化web3的函数
    const web3Instance = await initWeb3()
    commit('SET_WEB3', web3Instance)
    const coinbase = await web3Instance.eth.getCoinbase()
    commit('SET_COINBASE', coinbase)
  }
  

• 在computed中直接处理null的情况
  如果不想加加载状态，可以在computed映射时给默认值，避免页面出现null：

  computed: mapState({
    coinbase: state => state.web3.coinbase || '未获取到账户信息',
    balance: state => state.web3.balance || 0
  })
  

• 监听state变化执行后续逻辑
  如果需要在状态更新后执行特定操作（比如根据coinbase获取余额），可以用watch监听状态变化：

  watch: {
    coinbase(newVal) {
      // 当coinbase有有效值时执行操作
      if (newVal) {
        this.$store.dispatch('getBalance', newVal)
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者Danish Saber