Как я могу сохранить данные страницы при маршрутизации по страницам моего сайта? (Vue vue -маршрутизатор)

Question

Я не могу понять, как не потерять данные при переходе со страницы на другую, например, я реализовал список дел, в котором я могу добавлять, редактировать, удалять задачи. Но если я добавляю задачу, а затем переключаюсь на другую страницу, когда возвращаюсь на свою страницу todo, добавленная задача пропадает.

Как я могу сделать возможным сохранение данных страницы при переходе на другую страницу?

Я использую Vue и vue -router

Вот моя страница задач:

 <template>
 <div id="todolist" class="container">
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<input
  type="text"
  class="todo-input-text form-control w-50 mt-4 mb-4"
  placeholder="Insert task"
  v-model="newtask"
  @keyup.enter="addTodo"
/>
<div class="todo-item w-50 row" v-for="(todo, index) in tasksFilter" :key="todo.id">
  <input
    class="form-check-input bg-blue position-static"
    type="checkbox"
    v-model="todo.completed"
  />
  <div
    v-if="!todo.editing"
    @dblclick="editTodo(todo)"
    :class="{completed : todo.completed}"
    class="col-10"
  >{{todo.task}}</div>
  <input
    v-else
    type="text"
    @keyup.enter="doneEdit(todo)"
    class="todo-input-edit col10 form-control"
    v-model="todo.task"
  />
  <span @passinguserID="passinguserID">{{userID}}</span>
  <div v-if="todo.editing" class="removeitem col-2 text-right" @click="returnTodo(todo)">Return</div>
  <div class="removeitem col-2 text-right" @click="removeTodo(index)">Remove</div>
</div>

<div class="todo-item mt-4 w-50 row footerlist">
  <div>
    <input
      id="checkallbox"
      type="checkbox"
      @change="checkallmanually"
      :checked="checkallauto"
      class="form-check-input position-static"
    />
  </div>
  <div class="col-9" style="left:-7px;">
    <label>Check all</label>
  </div>
  <div class="col-3" style="white-space:no-wrap">
    <span>
      Pending :
      <b
        :class="{notaskleft : remainingitem==0}"
        style="transition:0.25s;"
      >{{remainingitem}}</b>
    </span>
  </div>
</div>

<div class="final-container">
  <div class="w-50 row mt-4" style="margin:0 auto;">
    <div class="col-1"></div>
    <button
      class="btn btn-dark col-2"
      :class="{ active: filter =='all'}"
      @click="filter = 'all'"
    >All</button>
    <div class="col-2"></div>
    <button
      class="btn btn-dark col-2"
      :class="{ active: filter =='active'}"
      @click="filter = 'active'"
    >Pending</button>
    <div class="col-2"></div>
    <button
      class="btn btn-dark col-2"
      :class="{ active: filter =='completed'}"
      @click="filter = 'completed'"
    >Done</button>
    <div class="col-1"></div>
  </div>
  <div style="margin:0 auto;" class="row w-50 mt-5">
    <button
      style="margin:0 auto;"
      class="btn btn-danger col-4 mb-5"
      v-if="showclearbutton"
      @click="clearcompleted"
    >Clear completed</button>
  </div>
</div>
<login></login>
</div>
</template>

<script>
import login from "./login.vue";

export default {
name: "Todolist",
components: {
login
},
data() {
return {
  newtask: "",
  idfor: 3,
  filter: "all",
  archive: [],
  tasks: [
    {
      id: 1,
      task: "Finish the todo list",
      completed: false,
      editing: false,
      savelbl: "",
      userID: this.userID
    },
    {
      id: 2,
      task: "cane",
      completed: false,
      editing: false,
      savelbl: "",
      userID: this.userID
      }
    ]
  };
 },
 computed: {
 remainingitem: function() {
  return this.tasks.filter(todo => !todo.completed).length;
 },
 checkallauto: function() {
  return this.remainingitem == 0;
 },
  tasksFilter: function() {
  if (this.filter == "all") {
    return this.tasks;
  } else if (this.filter == "active") {
    return this.tasks.filter(todo => !todo.completed);
  } else if (this.filter == "completed") {
    if (this.tasks.filter(todo => todo.completed).length > 0)
      return this.tasks.filter(todo => todo.completed);
    else {
      alert("no task completed");
      this.defaultFilter();
    }
  }
  return this.tasks;
  },
   showclearbutton: function() {
    return this.tasks.filter(todo => todo.completed).length > 0;
   }
   },
   directives: {
   focus: {
   // directive definition
     inserted: function(el) {
     el.focus();
    } 
   }
  },
   methods: {
   addTodo: function() {
   if (this.newtask != "") {
    this.tasks.push({
      id: this.idFor,
      task: this.newtask,
      completed: false,
      editing: false,
      savelbl: "",
      userID: this.userID
    });

    this.newtask = "";
    this.idfor++;
    } else alert("task cannot be empty");
    },
     removeTodo: function(index) {
      this.tasks.splice(index, 1);
     },
      editTodo: function(todo) {
       todo.savelbl = todo.task;
       todo.editing = true;
      },
     doneEdit: function(todo) {
      if (todo.task != "") todo.editing = false;
      else alert("task cannot be empty");
      },
      returnTodo: function(todo) {
      todo.task = todo.savelbl;
      todo.editing = false;
      },
      checkallmanually: function() {
      this.tasks.forEach(todo => (todo.completed = event.target.checked));
      },
      clearcompleted: function() {
      this.archive.push(this.tasks.filter(todo => todo.completed));
      this.tasks = this.tasks.filter(todo => !todo.completed);
      this.filter = "all";
      },
      defaultFilter: function() {
      this.filter = "all";
      },
      passinguserID: function(data) {
      this.tasks.userID = data;
      }
     }
    };
 </script>

 <style lang="scss">
 @import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");
 .todo-input-text {
 margin: 0 auto;
 }

  .todo-input-edit {
  max-width: 360px !important;
  line-height: 1.5 !important;
  font-size: 18px !important;
  }

 .todo-item {
  line-height: 1.5;
  font-size: 18px;
  margin: 0 auto !important;
  }
  .removeitem {
  cursor: pointer;
  text-align: end;
  &:hover {
  color: rgb(29, 102, 212);
  transition: 0.25s;
 }
}

.edititem {
cursor: pointer;
&:hover {
color: rgb(29, 102, 212);
transition: 0.25s;
}
}

.completed {
 text-decoration: line-through;
 opacity: 0.7;
 font-style: italic;
}

.footerlist {
 border-top: 1px solid lightslategray;
 line-height: 24.5px;
 font-size: 14px;
 }
.notaskleft {
 color: green;
font-size: 16px;
 transition: 0.25s;
 }
 </style>

И моя страница приложения, где я установил маршрутизатор

 <template>
 <div id="app" class="container">
   <div id="nav" style="margin:0 auto;" class="logo mb-5 mt-2 p-0">
      <img class="logo" alt="Vue logo" src="./assets/logo.png" />
      <a><router-link to="/completed">Completed</router-link></a>
      <a><router-link to="/todolist">todolist</router-link></a>


  </div>
   <!-- <Todolist></Todolist> -->
   <!-- <completed></completed>     -->
  <router-view/>

  </div>
</template>
<script>

</script>
<style>
 *{
   box-sizing: border-box;
  }
  .container {
  max-width: 600px;
  margin: 0 auto;
  }
  .logo{
  display: block;
  max-width: 100px;
   max-height: 100px;
   margin:0 auto;
  }
  #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   /* text-align: center; */
   color: #2c3e50;
   }

    #nav {
    padding: 30px;
    display: block;
   }

   #nav a {
   font-weight: bold;
   color: #2c3e50;
  }

  #nav a.router-link-exact-active {
  color: #42b983;
  }
  </style>

И вот страница, на которую я перехожу, а затем теряю данные на странице задачи

<template>
<div>
    completed tasks here
</div>
</template>
<script>

export default{}

</script>

Итак, дело в том, как не потерять данные при переключении страниц, если я добавлю задача на моей странице дел, как я могу сохранить ее, когда вернусь к ней?

Answer 1

У вас есть несколько вариантов.

1. Рекомендуемый способ сохранить состояние компонентов - использовать vuex , что дает вам единое место для хранения данных, которые затем можно быть совместно используемым в ваших компонентах или просто сохраняться до тех пор, пока вы снова не вернетесь к тому же компоненту.
2. Сохраните данные в localeStorage или ie по мере внесения изменений или когда вы покидаете компонент. Затем вы можете загрузить его снова позже, когда он вам понадобится.
3. Используйте , который будет кэшировать ваши компоненты в памяти, что означает, что состояние не будет потеряно, когда вы переходите от него или к нему. Однако это будет использовать больше памяти на клиентском компьютере, так что имейте в виду.

Answer 2

Для этого можно использовать vuex . Он управляет состоянием вашего приложения. Однако по умолчанию он не является постоянным. Вы можете написать действие vuex, сохраняющее ваши изменения в localStorage, чтобы сделать его постоянным даже после перезагрузки сайта.