缓存暂时存储在sessionStorage，超简单vue缓存 include

方法一（暂时存储在sessionStorage）

修改资料的时候，比如修改姓名，点击修改头像会跳转其他面，再回来时刚修改的姓名会恢复原始数据，下面就是解决这个问题：

HTML：

<div @click="picture">
        <div class="touW">头像</div>
        <i class="right">
         <img :src=tu >
        </i>
 </div>

<li>

 <span class="mingC">姓名</span>

 <span class="right"><input  v-model="username"/></span>
 </li>

return定义：

return {

url: {},
tu: '',

username: '',

}

mounted里：

mounted() {

//如果没有跳转页面，则是正常的接口

if (!sessionStorage.getItem("onece")||sessionStorage.getItem("onece")==0) {

//      名字接口
            this.$http.get(...地址, {
            }).then(response => {
                this.username = response.data.data.name;

            }),

// 头像接口
         this.$http.get(..., {

}).then(response => {
            this.url = http;
            this.tu = that.url + response.data.data.path
          })

//跳转头像页面就会暂时保存在sessionStorage里

}else{

 var obj=JSON.parse(sessionStorage.getItem("item"))

 // 头像接口
           this.$http.get(..., {
          }).then(response => {
            this.url = http;
            this.tu=this.url+response.data.data.path
          }),
//      名字接口
           that.username=obj.username,

}

}

methods里：

 methods: {
      save(){
        var obj={username:this.username,param:this.param,birth_day:this.birth_day,address:this.address,address1:this.address1,address2:this.address2,selectList:this.selectList,selectoption:this.selectoption,introduction:this.introduction}
        sessionStorage.setItem("item",JSON.stringify(obj))
      },

 picture: function () {
        this.$router.push('跳转的页面')
        sessionStorage.setItem("onece",1)
        this.save()
      }

}

 

 

 

方法二（vue缓存机制include）

app.vue

 <template>
  <div id="app">
    <keep-alive :include="cacheList">
        <router-view ></router-view>
    </keep-alive>
  </div>
</template>


<script>
export default {
  name: 'App',
  computed: {
      cacheList() {//缓存页面
            return this.$store.getters.cacheList
      }
  }
}
</script>

store全局参数

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {//这里放全局参数
      cacheList: []//缓存页面
  },
  getters:{//这里是get方法
      cacheList:state=>state.cacheList
    },
  mutations: {//这里是set方法
    PUSH_CACHENAME:(state, name) => {
      if (state.cacheList.indexOf(name) == -1) {
        // console.log('PUSH_CACHENAME-----', name)
        state.cacheList.push(name)
      }
      // console.log('cacheList-------', state.cacheList)
    },
    DEL_CACHENAME:(state, name) => {
      const index = state.cacheList.indexOf(name)
      if (index >= 0) {
        // console.log('DEL_CACHENAME-----', name)
        state.cacheList.splice(index, 1)
      }
      // console.log('cacheList-------', state.cacheList)
    },
  },
  actions: {
 
    pushCacheName:({commit}, name) => {
      commit('PUSH_CACHENAME', name)
    },
    delCacheName:({commit}, name) => {
      commit('DEL_CACHENAME', name)
    },
  },
  modules: {
  }
})

使用方法：

//需要缓存的页面
  mounted(){
            // 页面缓存
            this.$store.dispatch('pushCacheName', this.$route.name)
           }

// 首页或者需要去除页面缓存方法
            this.$store.dispatch('delCacheName', '页面名称')