Vue.js/vuex ajax 用 ajax 状态更新组件

Question

我在 vuex 中使用 vue webpack 模板，我基本上遇到组件未随状态更新的问题。

我有一家商店

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 总是 returns 空数组，因为商店中的 userData 尚未完成。我有几十种方法执行各种计算，都是基于这个数组，所以如果一个失败，它们都会失败。

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

Answer 1

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

所以首先，如果组件嵌套在父组件下，this.$store 似乎会指向同一个商店。然后你应该尝试使用所需的值作为属性，所以它是反应性的。

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

当你在上面时，也将周数据放入计算属性中：

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

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

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

Vue.js/vuex ajax 用 ajax 状态更新组件

Vue.js/vuex ajax update components with ajax state

javascript

vue.js

vuex