vue.js - vue为什么视图没有更新

问题描述

问 题

第一个问题:第一次进入这个页面时.没有数据(但是在vuex里有数据),然后点击其他链接,再点击此页面,数据就出来了
第二个问题: 刷新后页面无数据.(vuex有数据)
第三个问题: 我添加或删除用户后,视图也没有更新,总是得先点其他链接,再点此页面的链接,才能触发更新.代码如下:
组件:

mounted: function () {
      var that = this;
      this.$nextTick(function () {
        this.get_all_people()
      })
    },

    computed: {
      ...mapState({
        user: ({ people }) => people.user,
      })
    },

  <tr class="gradeX" v-for="item in user">
                  <td>{{ item.name }}</td>
                  <td>{{ item.email }}</td>
                  <td>{{ item.phone}}</td>
                  <td>
  </tr>

 methods:{
      ...mapActions([
        'add_people',
        'get_all_people',
        'del_people'
      ]),
      }

vuex:

  get_all_people({commit}){
    api.get_all_people()
      .then(function (res) {
        console.log(res.data.data)
        commit('GET_PEOPLE',res.data.data)
      })
  }

  [GET_PEOPLE](state , action){
    state.user = action
  },
}

vue工具:

(可以看到vuex里这里是有user这个数据的.)

解决方案

mounted 中 没有你定义的方法 用该用 this.$dispath 到actions中的get all

这篇关于vue.js - vue为什么视图没有更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！