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

【问题标题】：VueX: How to call a action.js method on page load?VueX：如何在页面加载时调用 action.js 方法？
【发布时间】：2019-11-30 19:36:21
【问题描述】：

我是 nuxt 的超级新手，并且接手了一个大型项目。我无法弄清楚其他视图是如何做到的，但我想在页面加载时运行 axios，有人可以帮我吗？

这个项目的结构方式是它有一个 store 文件夹（猜测这是 vuex），并得到一个 getter.js、mutations.js、index.js、state、js 和 actions.js（如果这是道歉自然的方式）不确定我的项目的方式是自定义设计模式还是只是使用 nuxt / vuex 的 goto 方式

到目前为止，我已经尝试过了，

computed: {
  plans: 'accountBilling/fetch',
},

但我相信这是针对 getters.js 文件的？

我有一个 actions.js 文件，并且想在页面加载时调用并接收来自 fetch 的响应？

export default {
  async fetch({ commit }, { account_id }) {
    return await this.$axios.get(`/accounts/billing/plans`)
      .then(response => { commit('setPlans', response.data); response.data })
      .catch(error => { throw error })
  },
}

【问题讨论】：

你能分享store文件夹的文件夹结构和state.js的代码吗？

标签： javascript vuex nuxt.js

【解决方案1】：

在 Nuxt.js 中，您实际上并没有这样的根组件。您可以使用 index.vue 组件，但如果有人通过不同的页面进入您的 Web 应用程序，则不会调用该函数。所以我发现最好的方法是使用 Nuxt 内置的中间件功能。

首先，在您的根目录中创建一个middleware 文件夹（如果您还没有）并添加一个文件onload.js。

在文件中添加以下代码：

export default function ({store}) {
    store.dispatch('fetchMenu')
    // Or whatever action you want to call
  }

然后将此中间件添加到您的 nuxt.config.js

...
 router: {
    middleware: ['onload']
  },
...

【讨论】：

【解决方案2】：

在您的根组件中，在 mounted 挂钩中：

mounted() {
  this.$store.dispatch("fetch");
}

然后制定计划：

computed: {
  plans() { return this.$store.state.plans; }
}

【讨论】：