vue 子组件修改数据后。 必须刷新才会更改。 怎么让他在修改数据后自动刷新

Question

vue 子组件修改数据后。 必须刷新才会更改。 怎么让他在修改数据后自动刷新

//传值给父组件

   
  mounted(){
  this.GetTheList();
  this.ReadStoredData();
    },

   methods: {
  SearchCardname(keyword){
    this.$emit('Cardname', this.CardName);
    //把搜索的东西传到localStorage中
    keyword = keyword.trim();
    if (keyword === '') {
      return
    }
    let {historyItems} = localStorage;
    if (historyItems === undefined) {
      localStorage.historyItems = keyword;
    } else {
      const onlyItem = historyItems.split('|').filter(e => e !== keyword);
      if (onlyItem.length > 0) historyItems = keyword + '|' + onlyItem.join('|');
      localStorage.historyItems = historyItems;
    }
  },
  //用于把localStorage的值渲染到页面中。
  ReadStoredData(){
    if (!localStorage.getItem("historyItems")) {
      return
    }
    let aa = localStorage.getItem("historyItems");
    aa = aa.replace(/\s+/g, "");
    this.searchHistory = aa.split('|');
    this.searchHistory = this.searchHistory.slice(0, 10);
  },
  //删除localStorage的值
  DeleteStoredData(){
    localStorage.removeItem('historyItems');
  }
  
  
  

在搜素或者删除记录后。 没有马上跟新。  必须刷新页面才可以。 这个搜素ye'mian是一个子组件。

怎么让他自动跟新。。 求指定下。

Answer 1

存入localStorage的数据在data里也存一个. mounted的时候进行读取localStorage来对数据进行赋值。页面用这个数据来更新试图，搜索和删除记录的时候，这个数据也进行相应的更新，并且也更新localStorage。这样就能实时刷新了

Answer 2

子组件修改数据后，马上触发父组件的一个方法，更新你想要更新的数据。就可以自动刷新了！

Answer 3

localStorage 不好监视的。你可以引入Vuex来做全局状态管理。

Answer 4

可以使用watch监听数据的变化