VueX:如何在页面加载时调用action.js方法？

在VueX中，可以通过在页面加载时调用action.js方法来实现数据的初始化和异步操作。下面是具体的步骤：

首先，在你的Vue组件中引入VueX，并在created生命周期钩子函数中调用action.js方法。例如：

import { mapActions } from 'vuex';

export default {
  created() {
    this.fetchData(); // 调用action.js中的fetchData方法
  },
  methods: {
    ...mapActions(['fetchData']) // 将action.js中的fetchData方法映射到组件中的方法
  }
}

接下来，在你的action.js文件中定义fetchData方法，并在该方法中进行异步操作。例如：

export default {
  actions: {
    fetchData({ commit }) {
      // 进行异步操作，例如发送请求获取数据
      // 可以使用axios或者其他HTTP库发送请求
      // 异步操作完成后，通过commit方法提交mutation来更新state中的数据
      // 例如：
      // axios.get('/api/data')
      //   .then(response => {
      //     commit('updateData', response.data);
      //   })
      //   .catch(error => {
      //     console.error(error);
      //   });
    }
  }
}

最后，在你的mutation.js文件中定义updateData方法，用于更新state中的数据。例如：

export default {
  mutations: {
    updateData(state, data) {
      state.data = data;
    }
  }
}

这样，在页面加载时，created生命周期钩子函数会被调用，从而触发fetchData方法，该方法会进行异步操作并通过commit方法提交updateData mutation来更新state中的数据。页面可以通过mapActions将action.js中的方法映射到组件中的方法，从而在页面中调用该方法。

关于VueX的更多详细信息，你可以参考腾讯云的相关文档和产品介绍：