vue-cli中使用vuex 刷新后数据消失问题

Posted 2021-01-01 wulzt

vue-cli中使用vuex 刷新后数据消失问题

这个时候要用localStorage

参考

//使用情况  其他代码省略
//Header.vue中
<template>
  <div id="header">
    <div class="s-input">
      <input type="text" class="search" placeholder="请输入您要搜索的产品名次、型号或名称" v-model="searchVal"/>
      <input type="submit" class="s-submit" value="搜索" @click="searchIt()"/>
    </div>
  </div>
</template>

<script>
import store from ‘../store/index.js‘

export default {

  data(){
    return{
      searchVal:‘‘,
    }
  },
  methods: {
    searchIt(){
      var self = this
      if(this.searchVal==‘‘){
        alert(‘输入不能为空‘)
      }else{
        $.ajax({
          url: ‘https://erienniu.xyz/api/search?page=1&keyword=‘+this.searchVal+‘&select=‘,
          type: "GET",
          dataType: "jsonp", //指定服务器返回的数据类型
          data: "{}",
          success: function(data) {
            //localStorage
            var storage=window.localStorage;

            if(!window.localStorage){
                alert("浏览器不支持localstorage");
                return false;
            }else{
                storage.setItem("result",JSON.stringify(data.data.item));
            }
          },
          error: function(error) {
            console.log(error)
          }
        });
      }
      this.$router.push({
        path:‘/search‘,
        query: {
          page: ‘1‘,
          select: ‘‘,
          keyword: this.searchVal,
        },
      })

    }
  },
}
</script>

router中配置

    {
      path:‘/search‘,
      name: ‘Result‘,
      component: Result
    },

//Result.vue
<template>
<div class="itemsBox">
        <div class="item" v-for="(item,index) in this.result" :key=‘index‘>
          <img :src="item.picture"/>
        </div>
</div>
</template>
<script>
import store from ‘../store/index.js‘
export default{

  data(){
    return{
      result: JSON.parse(localStorage.getItem(‘result‘))
    }
  }
}
</script>

这个时候刷新不会丢失数据，但是再次在header的搜索框中搜索时发现数据不更新，因为result组件没有重新渲染数据。所以我想在点击搜索按钮的时候重新加载result组件

首先是App.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view v-if="isRouterAlive"></router-view> 
    <Footer></Footer>
  </div>
</template>
<script>
import Header from ‘./components/Header‘
import Footer from ‘./components/Footer‘
import store from ‘./store/index.js‘

export default {
  name: ‘app‘,
  provide (){
    return {
     reload:this.reload
    }
  },
  data(){
    return {
       isRouterAlive:true
    }
  },
  methods:{
    reload (){
       this.isRouterAlive = false
       this.$nextTick(function(){
         this.isRouterAlive = true
       })
    }
  },
  components: {
    Header,
    Footer,
  },

}
</script>

Header.vue中增添两处代码

export default {
  inject:[‘reload‘],  //添加这句
  data(){
    return{
      searchVal:‘‘,
    }
  },
  methods: {
    searchIt(){
      var self = this
      if(this.searchVal==‘‘){
        alert(‘输入不能为空‘)
      }else{
        $.ajax({
          url: ‘https://erienniu.xyz/api/search?page=1&keyword=‘+this.searchVal+‘&select=‘,
          type: "GET",
          dataType: "jsonp", //指定服务器返回的数据类型
          data: "{}",
          success: function(data) {
            var storage=window.localStorage;

            console.log(data);
            if(!window.localStorage){
                alert("浏览器支持localstorage");
                return false;
            }else{
                storage.setItem("result",JSON.stringify(data.data.item));
            }
            self.reload()  //添加这句
          },
          error: function(error) {
            console.log(error)
          }
        });
      }
      this.$router.push({
        path:‘/search‘,
        query: {
          page: ‘1‘,
          select: ‘‘,
          keyword: this.searchVal,
        },
      })
       //self.reload()  本来把这句写在了这里，是个坑，
       //写在这里的话会reload运行完了之后才更新数据，就没有起到更新数据后重新加载组件的效果
    }
  },
}
</script>