使用vuex操作从端点获取数据并在vuex中设置存储变量？

编程问答 2022-08-16

问题描述

我需要从端点获取数据，然后将数据分配给商店中的状态变量。

代码看起来像这样。

import Vue from 'vue'
import axios from 'axios'

import Vuex from 'vuex'
Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
      sample: 'foo',sample2 : [],sample3: []
    },getters:{
    },actions:{
      getData(context){
        axios.get('/endpoint').then(function(response){
          console.log(context.state);
          console.log(context.state.sample);
          console.log(response);
          context.state.sample = 'bar';
          console.log(context.state.sample);
          context.state.sample2 = response.data.sample2data;
          context.state.sample3 = response.data.sample3data;
        }
        );
      }
    },mutations:{
    }
});

问题是，据我所知，该应用程序根本不执行axios请求。我已经在其他地方测试了端点，并且确定请求本身没有错。当然，每次安装我的应用程序时，都应该执行该请求吗？

解决方法

您可以在mounted的{​​{1}}方法中

App.js
,

您需要使用创建的vue实例的创建方法分派操作。如果在组件中分派操作，则仅在安装组件后 注入存储。仅在安装组件后才加载数据，这意味着需要读取数据的组件可以访问它，但是处于加载状态的状态的数据将是未定义的。

export const store = new Vuex.Store({
    state: {
      sample2 : [],// undefined
      sample3: []  // undefined
    },getters:{
    },actions:{
      getData(context){
        axios.get('/endpoint').then(function(response){
          context.state.sample2 = response.data.sample2data;
          context.state.sample3 = response.data.sample3data;
        }
        );
      }
    },mutations:{
    }
});

以下内容可确保在安装任何组件之前先分派操作，因此，在操作正确设置值后，组件将能够读取状态。 

import {store} from 'path/to/store/';

new Vue({
  el: '#app',computed:,store: store,created() {
    this.$store.dispatch('getData') // dispatch loading
  }
})
axiosaxiosaxiosfluxfluxfluxvue.js