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

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

Answer 1

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

所以首先，如果组件嵌套在父组件下，就像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 语法，因为它使事情更具可读性并且某些部分更简洁:)