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

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 }}，但不确定如何更新组件数据。

Answer 1

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

所以首先，如果组件嵌套在父组件下，就像 this.$store 一样，它将指向同一个商店。然后您应该尝试将所需的值用作属性，因此它是 react 性的。

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

当你在上面的时候，也将 weekdata 放入计算属性中:

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

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

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