从 Vuejs 中的 localStorage 中删除值

Question

朋友们

问题

我遇到的问题是，当我在视频部分观看特定剧集时，本地存储中存储了我之前看到的视频的 src。

我的目的是在离开视频部分后消除本地存储的价值。

模板视频

<template>
  <!-- Main -->
  <main class="flex-1 bg-grey-lightest z-0 py-5 px-0">
    <div class="flex flex-wrap max-w-5xl mx-auto">
      <!-- main col -->
      <div class="w-full md:flex-1">
        <!-- player -->
        <div class="bg-black relative mb-3">
          <video 
            id="video"
            controls
          ><source :src="videos.video" type="video/mp4"></video>
        </div>
        <!-- video info -->
        <div class="flex flex-wrap items-end">
          <!-- title -->
          <div class="pb-2">
            <h1 class="text-xl my-2">
              <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
                <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">video</span>
                <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">{{content}}</span>
                <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">{{state}}</span>
                <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">eps - {{eps}}</span>
                <span class="font-semibold mr-2 text-left flex-auto">{{Title}}</span>
                <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
              </div>
            </h1>
            <span class="text-base text-grey-darken">{{synopsis}}</span>
          </div>
          <!-- buttons actions -->
          <div class="ml-auto">
            <!-- likes -->
            <div class="flex relative pb-2">
              <!-- like -->
              <div class="flex items-center">
                <span class="text-black opacity-50 text-sm"> ???????</span>
              </div>
              <!-- hate -->
              <div class="flex items-center ml-5">
                <span class="text-xs text-grey-darken ml-1"></span>
              </div>
              <div class="absolute w-full h-1 bg-grey pin-b t-5 rounded-full overflow-hidden">
                <div class="absolute pin-l pin-t w-3/4 h-full bg-grey-darkest"></div>
              </div>
            </div>
          </div>
          <hr class="w-full border-t m-0 mb-3 "/>
        </div>
      </div>
    </div>
  </main>
</template>

脚本

我在mounted属性中实现的是，如果视频存在，它消除了属于关键vuex的obj视频。

但是我所做的并没有做任何事情，当我离开视频部分时，视频对象会维护视频的 src。

<script>
  import swal from 'sweetalert';
  import {mapState} from 'vuex'
  import store from '../store/store'
  export default{
    name: 'Video',
    props: ['Id' , 'Title' , 'Eps' , 'Synopsis' , 'ContentType' , 'State'],
    data(){
      return{
        id: this.Id,
        eps: this.Eps,
        synopsis: this.Synopsis,
        content: this.ContentType,
        state: this.State,
      }
    },
    computed:{
      ...mapState(['videos' , 'isLoading'])
    },
    watch:{
      "Eps": function(value){
        this.eps = value;
        let eps = this.eps;
        let info = {id: this.id , eps: eps}
        store.dispatch('GET_ANIME_VIDEO' , info)
        swal("Message!", "Wait a few seconds for the video to load\nIt's normal that it takes a bit", "success");
      },
      "videos.video": function(value){
        this.videos.video = value;
        document.getElementById('video').load();
      }
    },
    mounted(){
      if(this.videos.video){
        const vuex = JSON.parse(localStorage.getItem('vuex'));
        delete vuex.videos;
        localStorage.setItem("vuex", JSON.stringify(vuex));
      }
    },
  };
</script>

突变

我想我要做的是创建一个突变来清理本地存储

export const mutations = {
  initialiseStore(state) {
    // Check if the ID exists
    if(localStorage.getItem('store')) {
      // Replace the state object with the stored item
      this.replaceState(
        Object.assign(state, JSON.parse(localStorage.getItem('store')))
      );
    }
  },
  SET_LATEST_DATA(state , payload){
    state.latest = payload;  
  },
  SET_VIDEO_ANIME(state , payload){
    state.videos = payload;
  },
  SET_ANIME_ALPHA(state , payload){
    state.animesByAlpha = payload;
  },
  SET_ANIME_GENDER(state , payload){
    state.animesByGender = payload;
  },
  SET_ANIME_SEARCH(state , payload){
    state.searchAnimeList = payload;
  },
  SET_GET_SCHEDULE(state , payload){
    state.schedule = payload;
  },
  SET_MOVIES(state , payload){
    state.movies = payload;
  },
  SET_OVAS(state , payload){
    state.ovas = payload;
  },
  IS_LOADING(state , payload){
    state.isLoading = payload;
  }
};

行动

 GET_ANIME_VIDEO({commit} , info){
    console.log("id: " , info.id , "chapter: " , info.eps)
    A.get(`${API_URL_ENDPOINT.video}` + "/" + `${info.id}` + "/" + `${info.eps}`)
      .then((res) =>{
        console.log("video src = " , res.data)
        commit('SET_VIDEO_ANIME' , res.data);
        commit('IS_LOADING' , false);
      }).catch((err) =>{
      console.error(err);
    });
  },

Answer 1

解决方案

对于这样的事情，我会使用 Vue 生命周期钩子beforeDestroy：

在 Vue 实例被销毁之前调用。在此阶段，实例仍具有完整功能。

例子：

export default {
  // ... vue component stuff ...
  beforeDestroy () {
    localStorage.removeItem('vuex');
  }
}

解释

这将确保在从虚拟和真实 DOM 中删除实例之前，我们从 localStorage 中删除一个名为 的项目vuex。

请注意，这不会清除 Vuex 中存储的状态。为此，您需要创建一个突变并以与 相同的方式调用该突变beforeDestroy()。

希望这可以帮助！

Answer 2

我的解决方案

我找到了解决方案，但我不知道它是否是最佳的。但他负责清洁工作。

beforeDestroy(){
  const vuex = JSON.parse(localStorage.getItem('vuex'));
  if(vuex.videos){
    localStorage.removeItem(vuex.videos);
  }
}

实际问题

当我离开视频会话并想要观看另一个视频时，上一个视频的屏幕仍然存在

我的目的是让屏幕保持黑色并且视频的分钟数为零