Удалить значение из localStorage в Vuejs - PullRequest
Новая
       21

Удалить значение из localStorage в Vuejs

2 голосов
/ 09 июля 2019

Друзья

Проблема

У меня проблема в том, что когда я нахожусь в разделе видео и смотрю определенный эпизод, в локальном хранилище хранится src видео, которое я видел ранее.

Мое намерение состоит в том, чтобы исключить значение локального хранилища, как только оно покинет раздел видео.

Local Storage

Шаблонное видео 

<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>

Сценарий

Что я реализовал В смонтированном свойстве есть то, что, если видео существует, оно устраняет obj видео, которое принадлежит ключу vuex.

Но то, что я сделал, ничего не делает, когда я покидаю раздел видео, объект видео поддерживает источник видео. 

<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);
    });
  },

Ответы [ 2 ]

1 голос
/ 09 июля 2019

Решение

Для чего-то подобного я бы использовал хук жизненного цикла Vue beforeDestroy:

Вызывается непосредственно перед уничтожением экземпляра Vue. На этом этапе экземпляр все еще полностью функционален.

Пример: 

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

Объяснение

Это гарантирует, что перед удалением экземпляра из виртуального И реального DOM мы удаляем из localStorage элемент с именем vuex.

Обратите внимание, что это не очищает состояние, которое хранится в Vuex. Для этого вам нужно создать мутацию и вызвать ее так же, как и в beforeDestroy().

Надеюсь, это поможет!

0 голосов
/ 09 июля 2019

Мое решение

Я нашел решение, но не знаю, является ли оно наиболее оптимальным.Но он делает уборку. 

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

Актуальная проблема

Когда я покидаю видео сессию и хочу пойти посмотреть другое видео, экран предыдущего видеоостается

Мое намерение состоит в том, чтобы экран оставался черным, а минуты видео были равны нулю

enter image description here

...