vuex延迟加载数据

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    setData(state, data) {
      state.data = data
    }
  },
  actions: {
    fetchData({ commit }) {
      // 异步获取数据的逻辑，可以调用API接口或发送异步请求
      // 示例中使用setTimeout模拟异步请求
      setTimeout(() => {
        const data = '延迟加载的数据'
        commit('setData', data)
      }, 1000)
    }
  },
  getters: {
    getData(state) {
      return state.data
    }
  }
})

export default store

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div>{{ data }}</div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getData'])
  },
  methods: {
    ...mapActions(['fetchData'])
  }
}
</script>