Question

我正试图首先扩大我的商店，以便按照以下答案将所有吸气剂，动作和突变都存储在单独的文件中：https://stackoverflow.com/a/50306081/5434053

我在服务文件中有API调用，POST api调用似乎有效，但GET调用却无效，该动作似乎什么也没收回。我错过了什么吗？


import Vue from 'vue';
import Vuex from 'vuex';

import actions from './actions';
import getters from './getters';
import mutations from './mutations';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    status: '',
    token: localStorage.getItem('token') || '',
    user: {},
    movie: {},
    movies: {}
  },
  actions,
  getters,
  mutations,
});

store / actions.js

import axios from 'axios'
import {APIService} from '../services/APIService';
const apiService = new APIService();

let getMovies = async ({commit, state, getter}) => {
    try {
      await apiService.getMovies(localStorage.getItem('token')).then((data, error) => {
        for (const movie of data.data.data.movies) {
          movie.edit = false;
          movie.deleted = false;
        }
        this.movies = data.data.data.movies;
        console.log(data)
        commit("fetch_movies", this.movies);        
      })
    } catch(error) {
      commit('auth_error')
      localStorage.removeItem('token')
      console.log(error)
    }
}

export default {
  getMovies,
};

Answer 1

您似乎正在从actions导入./actions。但是，当我在store/actions.js查看您的文件时，您没有导出任何内容。

要使JavaScript模块正常工作，您必须在文件中添加export语句-这样才能将导出的变量/属性导入其他位置。

此外：您似乎只声明了函数getMovies()而不将其添加到actions对象（您在store.js中导入）中。

尝试一下：

// in store/actions.js

// your code..

const actions = {
  getMovies,
}

export default actions;

编辑：

仅注意到您在操作中还使用了this。如果我没记错的话，它应该是未定义的，因为您只能使用lambda（箭头函数）。

将存储分离到单独的文件（动作，突变，获取器）中，现在无法使用api调用

1 个答案:

编辑：