Question

我正在学习Vue，并尝试通过一个Ajax请求在其创建过程中在组件中设置一个值。

这是src文件夹的结构：

src
    assets
    components
        Management.vue
    router
        index.js
    vuex
        modules
            caseSuiteList.js
        index.js
        actions.js
        getters.js
    App.vue
    main.js

Management.vue：

<template>
</template>
<script>
  import {mapState} from 'vuex'
  import store from 'vuex'
    export default {
      name: "Management",
      computed: mapState({
        suite_list: state => state.caseSuiteList.suite_list
      }),
      created(){
        store.dispatch('refresh')
      }
    }
</script>

caseSuiteList.js：

import axios from 'axios'

const state = {
  suite_list : {}
}

const mutations = {
  refreshSuiteList(state, payload) {
    state.suite_list = payload
  }
}

const actions = {
  refresh (context) {
    axios.get('http://127.0.0.1:8601/haha').then(function(res){
      console.log(res.data);
      context.commit('refreshSuiteList', res.data);
    }
    });
  }
}

export default {
  state,
  mutations,
  actions
}

如何在action的{{1}}中分配caseSuiteList.js的{{1}}，以实现此目的？

Answer 1

在vue实例（或其中的任何组件）中，您可以使用this.$store访问商店。

Answer 2

尝试在创建的组件挂钩中分派。

created() {
    this.$store.dispatch('refresh');
  }

有关Vuex的更多信息：https://vuex.vuejs.org/guide/actions.html

在Vue中创建过程中如何设置从ajax请求到参数的组件中的值？

2 个答案: