Vue.js/vuex ajax 使用ajax 状态更新组件 [英] Vue.js/vuex ajax update components with ajax state

问题描述

我正在将 vue webpack 模板与 vuex 一起使用，但我基本上遇到了组件不随状态更新的问题.

I'm using vue webpack template with vuex and I'm basically having issues with components not updating with the state.

我有一家店

const state = {
  userData: {},
}

在我的应用程序中，我有一个方法

In my app I have a method

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 完成加载，也没有以任何方式绑定.我很可能在这里做错了，但基本上在我的组件中我有

Everything is fine up to here, the data is going into the store fine. But then I have a component which isn't working, as it's not waiting for the ajax to finish loading, nor is it binded in any way. I may well be doing this wrong here, but basically in my component I have

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

methods: {

    tester: function(a) {

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

    },

},

我用和以前一样的方式调用它

I call this in the same manner as I did before

mounted () {

    this.tester();

},

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

The issue is that this.weekData.weekDataList always returns an empty array as the userData in the store hasn't managed to complete. I have dozens of methods performing various calculations, all based on this one array, so if one fails they all fail.

也许我的方法是错误的，但理想情况下，我希望数据属性在商店更新后更新?我尝试使用计算属性执行此操作，并且使用 {{whatever}} 可以正常工作，但不确定如何更新组件数据.

Perhaps my approach is wrong, but ideally I would like the data attributes to update once the store is updated? I tried doing this with computed properties and works fine with {{ whatever }}, but wasn't sure how to update the components data.

推荐答案

您走对了路.计算属性绝对是这里的方法.在您当前的情况下，您的组件以任何反应方式对商店一无所知.您只是有一个函数可以尝试在任何给定点读出数据，而正确的数据可能存在也可能不存在.

you were on the right paths. Computed properties is definitely the way to go here. In you current situation your component knows nothing about the store in any reactive way. You just have a function that tries to read out the data at any given point and the correct data may be there or not.

所以首先，如果组件嵌套在父级下，看起来 this.$store 将指向同一个商店.然后，您应该尝试使用所需的值作为属性，因此它是响应式的.

So first of all, if the component is nested under the parent, as it seems to be this.$store will point to the same store. You should then try to use the needed value as a property, so it's reactive.

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

当你在做的时候，也把周数据扔到计算属性中:

and while you are on it, also throw the weekdata into the computed properties:

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

通过这样做，所有数据都将是反应式的，weekData 将相应地更新.

By doing this, all the data will be reactive, and the weekData will update accordingly.

希望这会有所帮助，总的来说，当您已经在使用 Webpack 时，我会考虑开始使用 ES6 语法，因为它使事情更具可读性，并且某些部分更清晰:)

Hope this helps, and in general, when you are using Webpack already, I would consider starting to use the ES6 Syntax as it makes things more readable and some parts a little cleaner :)

这篇关于Vue.js/vuex ajax 使用ajax 状态更新组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！