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

Question

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

代码看起来像这样。

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 请求。我已经在别处测试了端点，我确信请求本身没有任何问题。当然，每次安装我的应用程序时都应该执行请求吗？

Answer 1

在你的App.js的mounted方法中你可以做

mounted() {
  this.$store.dispatch('getData')
}

Answer 2

您需要在您创建 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 } })

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

Fetch data from endpoint using vuex action and set store variables in vuex?

flux

vue.js

axios

vuex