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

也许我的方法是错误的，但理想情况下，我想在商店更新后更新数据属性？我尝试使用计算属性执行此操作，并与{{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状态

1 个答案: