vue中对象属性改变视图不更新的问题大家有没有好的解决办法？

Question

对象属性变化变化有个问题就是数据的变化会导致视图的不更新 数据变了但是视图没有更新 所以我网上搜了一下 看到有人说用Vue.set和Object.assign解决这个问题

我的这个效果是初始化时数据从state里面取 然后手动下拉刷新时从后台取数据然后替换掉state里面的articleList数据
下面是初始化时state的数据

articleList: [
    {
      userinfo: {image: 'static/img/3.jpeg', nickname: 'eee', text: '嘿嘿', time: '十天前'},
      content: {href: '2222222', text: 'test', create_time: '', updata_time: ''},
      pic: [{path: 'static/img/0.jpg'}, {path: 'static/img/0.jpg'}, {path: 'static/img/0.jpg'}],
      likebar: {hot: 555, status: false, comments: 666},
      isFollow: true
    },
    {
      userinfo: {image: 'static/img/3.jpeg', nickname: 'eee', text: '嘿嘿', time: '十天前'},
      content: {href: '', photo: '', text: 'test', create_time: '', updata_time: ''},
      pic: [{path: 'static/img/0.jpg'}, {path: 'static/img/1.jpg'}, {path: 'static/img/3.jpeg'}],
      likebar: {hot: 555, status: false, comments: 666},
      isFollow: false
    }
  ],

首先我用Vue.set试了一下 但是第一次下拉刷新后展示出来的数据就不对
mutation.js

updateList (state, data) {
    Vue.set(this.state, 'articleList', data)
    console.log(this.state.articleList)
}

后来用Object.assign试了下 第一次下拉刷新可以更新视图 展示的数据也都没错 但是后面第二次第三次下拉刷新时如果后台数据变了但是视图还是第一次下拉刷新后的结果 就是第一次时可以更新视图 但是后面就又不能更新视图了 不知道这是不是Object.assign的问题
对象属性更新的问题弄了两天了还没有解决 不知道大家有没有好的办法？

mutation.js

updateList (state, data) {
    this.state.articleList = Object.assign({}, this.state.articleList, data)
    //this.state.articleList = Object.assign({}, data) //这样写和上面的效果一样
    console.log(this.state.articleList)
  }

Answer 1

https://vuex.vuejs.org/zh/gui...

Answer 2

this.articleList=JSON.parse(JSON.stringify(this.articleList))

Answer 3

自己去拿代码测试去吧，已经回答过你的问题了
能翻墙的在线预览：https://codesandbox.io/s/z6mp...
不能翻墙的用下面的代码测试

store中的几个文件
state.js

export default {
  articleList: [
    {
      userinfo: {
        image: "static/img/3.jpeg",
        nickname: "eee",
        text: "嘿嘿",
        time: "十天前"
      },
      content: {
        href: "2222222",
        text: "test",
        create_time: "",
        updata_time: ""
      },
      pic: [
        { path: "static/img/0.jpg" },
        { path: "static/img/0.jpg" },
        { path: "static/img/0.jpg" }
      ],
      likebar: { hot: 555, status: false, comments: 666 },
      isFollow: true
    }
  ]
};

mutations.js

export default {
  updateList(state, data) {
    state.articleList = data;
  }
};

getters.js

export default {
  articleList: state => state.articleList
};

actions.js

export default {
  getLists({ commit, state }) {
    //模拟异步请求数据
    setTimeout(() => {
      //模拟后台返回的新数据
      const newArticleList = [
        {
          userinfo: {
            image: "static/img/3.jpeg",
            nickname: "eee",
            text: "新增嘿嘿1",
            time: "刚刚1"
          },
          content: {
            href: "2222222",
            text: "test",
            create_time: "",
            updata_time: ""
          },
          pic: [
            { path: "static/img/0.jpg" },
            { path: "static/img/0.jpg" },
            { path: "static/img/0.jpg" }
          ],
          likebar: { hot: 555, status: false, comments: 666 },
          isFollow: true
        },
        {
          userinfo: {
            image: "static/img/3.jpeg",
            nickname: "eee",
            text: "新增嘿嘿2",
            time: "刚刚2"
          },
          content: {
            href: "2222222",
            text: "test",
            create_time: "",
            updata_time: ""
          },
          pic: [
            { path: "static/img/0.jpg" },
            { path: "static/img/0.jpg" },
            { path: "static/img/0.jpg" }
          ],
          likebar: { hot: 555, status: false, comments: 666 },
          isFollow: true
        }
      ];
      //执行commit更新数据
      commit("updateList", newArticleList);
    }, 2000);
  }
}

index.js

import Vue from "vue";
import Vuex from "vuex";

import getters from "./getters";
import actions from "./actions";
import mutations from "./mutations";
import state from "./state";

Vue.use(Vuex);

export default new Vuex.Store({
  getters,
  actions,
  mutations,
  state
});

页面代码

<template>
  <div>
    <div v-for="(article, index) in articleList" :key="index">
      <div>{{ article }}</div>
      <hr />
    </div>
    <button @click="onClick">更新数据</button>
  </div>
</template>

<script>
import { mapGetters, mapActions} from "vuex";
export default {
  computed: {
    ...mapGetters(["articleList"])
  },
  methods: {
    ...mapActions(["getLists"]),
    onClick() {
      this.getLists();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

Answer 4

updateList (state, data) {
    this.state.articleList = data
    // 或state.articleList = data
}

如果你没有使用modules并且index.js为：

import mutations from './mutations'
...
const store = new Vuex.Store({
  state: {
    ...    
  },
  mutations,
  actions,
  getters
})

那么应该是没有问题的，你看下返回的接口数据是不是有问题。