Vue.js/vuex ajax更新组件与阿贾克斯状态

我使用vue与vuex vue的webpack模板，我基本上与组件状态不更新的问题。Vue.js/vuex ajax更新组件与阿贾克斯状态

我有一个商店

const state = { 
    userData: {}, 
}

在我的应用我有一个方法

methods: { 

    addUserData: function() { 
     const that = this; 
     axios.get('URL').then(function (response) { 

      let obj = response.data; 
      that.$store.commit('addUserData', {obj}); 

     }); 
    },

我打电话的时候，它的安装

mounted() { 

    this.addUserData(); 

},

这与突变更新

const mutations = { 
addUserData(state, {obj}) { 
    state.userData = obj; 
},}

一切都很好，直到这里，数据进入商店罚款。但后来我有一个组件没有工作，因为它不会等待ajax完成加载，也不会以任何方式绑定。我很可能在这里做不对，但基本上在我的组件我有

data() { 
    return { 
     weekData : { 
      weekDataList: [].... 

methods: { 

    tester: function(a) { 

     // Sorting the userdata using lowdash 
     this.weekData.weekDataList = _.values(this.$store.state.userData); 

    }, 

},

我把这种以同样的方式，因为我之前做过

mounted() { 

    this.tester(); 

},

的问题是，this.weekData.weekDataList总是返回一个空数组，因为商店中的userData尚未完成。我有几十种执行各种计算的方法，都基于这一个数组，所以如果一个失败，他们都会失败。

也许我的方法是错误的，但理想情况下，我希望更新商店后更新数据属性？我试着用计算属性来做这件事，并且{{whatever}}正常工作，但不知道如何更新组件数据。

来源

2017-04-04 webknit

你是在正确的道路上。计算属性绝对是这里走的路。在你当前的情况下，你的组件对任何反应方式的商店一无所知。你只是有一个函数试图读取任何给定点的数据，并且正确的数据可能存在或不存在。

因此，首先，如果组件嵌套在父项下，因为它似乎是this.$store将指向同一商店。然后，您应该尝试将所需的值用作属性，因此它是被动的。

computed: { 
    userData: function() { 
    return this.$store.state.userData 
    } 
}

和，而你就可以了，还扔weekdata到计算性能：

computed: { 
    userData: function() { 
    return this.$store.state.userData 
    }, 
    weekData: function() { 
    return { 
     weekDataList: _.values(this.userData) 
    } 
    } 
}

通过这样做，所有的数据将是被动的，而weekData将相应更新。

希望这有助于，而在一般情况下，当你已经在使用的WebPack，我会考虑开始使用ES6语法，因为它使事情变得更具可读性和一些地方干净了一点:)

来源

2017-04-04 10:35:50 Codebryo

感谢@codebryo没错那效果很好，但我认为userData只能通过在输出中使用{{userData}}来访问。我可以在像this.userData这样的组件内的某个地方使用它，也许可以使用其他方法或其他方法。当范围用ajax更新时，我需要本地数据进行更新，因为其他方法反过来依赖于这一点数据。 – webknit

您可以像使用任何数据属性或方法一样使用'userData'，因为Vue为它创建了一个getter和setter。而且，它计算出它们将自动更新。 'this。$ store'是被动的，所以一旦这个改变，userData将被重新评估，并且随着改变，weekData也会自动更新。所以一切都发生异步就好了。 – Codebryo

这很合理，现在可以在其他计算函数中使用。假设我想获得第一个userData元素，{{userData [0]}}似乎不起作用，也不会在userData计算属性上返回以下内容。 var arr = weekDataList：_.values（this.userData） return arr [0] – webknit

Vue.js/vuex ajax更新组件与阿贾克斯状态

回答

相关问题