Question

我正在使用vue vuex和webpack开展项目。我有一个Vue实例并导入了一个vue组件和一个vuex存储。组件和存储都注册到Vue实例。我正在使用axios在组件中做了一个异步发布请求。在我得到结果但是我无法操纵商店而我无法获得Vue实例或组件...我怎么能用它呢？ PLZ？

app.js

import indexPage from './vue/index.vue'
const store = new Vuex.Store(....not relavent.....)
const router = new VueRouter({routes:[{path:'/', component:indexPage}]})
const app = new Vue({
    el:"#app",
    router,
    store
})


index.vue

<template>not relavent</template>
<script>
    export default {
        data(){return{}},

        methods:{ 
            dopost: function(){
                axios.post('/api',{}).then(){
                // apparently "this" wouldn't workhere
                // I've tried give this module a name and just use it
                // but it is just an object, not a instance. 
                // And I couldn't use the vue instance 
            }
        }
    }
</script>

有什么方法我不需要将异步请求更改为同步请求吗？

非常感谢

Answer 1

组件的所有方法都应该包含在方法属性中。

<script>
    export default {
     data(){
      return {}
     },

     methods: {
      postTo() {
        const self = this; // assigning this to self
        axios.post('/api',{}).then(){
         self.$store.commit('SOME_MUTATION_TYPE')
        }
      }

     }
    }
</script>

vue组件，如何通过vue组件中的异步请求（axios）更新存储状态（vuex）

1 个答案: