访问服务内部的 Vue 商店答案

【问题标题】：Access Vue store inside service访问服务内部的 Vue 商店
【发布时间】：2020-04-01 12:53:15
【问题描述】：

我对 Vue 有点陌生，正在尝试将我的逻辑放入商店，以便我可以在整个应用程序的多个组件中使用它。我创建了一个leads.module.js，它调用了我的leads.service.js 文件。

    import LeadsService from "../../services/leads.service";

    const state =  {
      leadsOverTime: {}
    }

    const actions = {
      async leadsOverTime({ commit }, group_by = '') {

        const response = await LeadsService.leadsOverTime(group_by);
        commit('leadsOverTime', response)
        return true

      },
    };

    const mutations = {
      leadsOverTime(state, data) {
        state.leadsOverTime = data;
      },
    };

    export const leads = {
      namespaced: true,
      state,
      actions,
      mutations,
    }

此文件由我的根存储导入，其中包含我在服务中需要的状态值：

    const state = {
        startDate        : moment().startOf('year').format(),
        endDate          : moment().format(),
        selectedLocations: [],

    }

    export default new Vuex.Store({
        modules: {
          leads: leads
        },
        state,
        strict: process.env.NODE_ENV !== 'production'
    })

最后，我的服务使用这些状态变量进行 API 调用：

    import axios from "../axios";
    import {store} from "../store/store"

    const LeadsService = {
      leadsOverTime: async function(group_by = '') {
        await axios.get(
          `/dashboards/potential_clients.json?
            &start_date=${ store.state.startDate }
            &end_date=${ store.state.endDate }
            &location_ids=${ this.selectedLocations }
            &compare=year
            &group_by=${group_by}`)
          .then( response => {
            return response
          })
          .catch( error => {
            console.log(error)
          })
      }
    };

    export default LeadsService
    export { LeadsService }

我认为这会起作用，但我收到一个错误：

Uncaught (in promise) TypeError: Cannot read property 'state' of undefined

我还应该如何访问服务中的这些变量？根存储被导入到我的 main.js 文件中，该文件应该在从我的组件中调用我的服务之前加载。我错过了什么？可能值得注意的是，在我的日志中我看到："export 'store' was not found in '../store/store'。

【问题讨论】：

import store 而不是 import { store }
smh。谢谢，做到了！

标签： vue.js

【解决方案1】：

代码没有问题。可能是store 的导入造成了问题。如果您将store 导出为const，那么您可以像这样导入它

// your store file
export const store = new Vuex.Store({
    modules: {
      // your modules
    },
});

// importing store to other files
import {store} from "../store/store"

否则你可以简单地导入

import store from "../store/store"

【讨论】：

【解决方案2】：

无需导入整个商店。你可以使用上下文在调用“leadsOverTime”中传递必要的变量。

状态变量不能在actions中直接访问，所以使用上下文来访问状态变量。

还可以提交一个突变，你可以调用“context.commit”

如果有错，请指正我是 vue 新手

const actions = {
  async leadsOverTime( context , group_by = '') {
    const response = await LeadsService.leadsOverTime(group_by,context.state);
    context.commit('leadsOverTime', response)
    return true
  },
};

【讨论】：