如何使用 rest API 在应用程序启动时正确初始化 Vuex 商店？

Posted 2023-04-14

【中文标题】如何使用 rest API 在应用程序启动时正确初始化 Vuex 商店？

【英文标题】：How to properly initialize Vuex store on app startup using rest API?

【发布时间】：2019-12-06 12:51:19

【问题描述】：

我想使用从 API 获取的一些数据来初始化商店（我正在使用 axios）如何在应用启动时执行此操作，仅一次？

我有一个用于导出我的商店的 store.js 文件和一个执行此操作的 main.js 文件：

import Vue from "nativescript-vue";
import store from "./store";

new Vue(
  store,
  render: (h) => h("frame", [h(App)]),
).$start();

【参考方案1】：

尝试将.dispatch() 与您的Axios REST API 抓取功能一起使用在Vue 主组件（包含存储的那个）的created() 挂钩中：

new Vue(
  store,
  render: (h) => h("frame", [h(App)]),
  created() 
    this.$store.dispatch('myAxiosFetchFunction');
  ,
).$start();

【讨论】：

在哪个组件上创建了钩子？我希望整个应用程序只运行一次。

在主组件中，在你放new Vuex.Store(store)的组件中。

好吧，我不知道你的应用程序的组件布局，但主/父组件听起来是正确的选择，因为你可能只有一个副本...

@Ali 不是一个组件。那是 store.js 文件......哦，你的意思是 Vue 实例中的 main.js 文件

@Zaroth 你能根据我的编辑更新你的答案吗？