Question

当我从一个页面路由到另一个页面时，我不知道如何不丢失数据，例如，我意识到一个待办事项列表，可以在其中添加，编辑，删除任务。但是，如果我添加一个任务然后返回到待办页面时切换到另一个页面，添加的任务就消失了。

当我路由到另一个页面时，如何存储页面的数据？

我正在使用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

您有一些选择。

推荐的跨组件保持状态的方法是使用vuex，它为您提供了一个存储数据的位置，然后可以在各个组件之间共享数据，或者只是保存直到回到同一组件为止再次。
在进行更改时或离开组件时，将数据保存在localeStorage或cookie中。然后，您可以在以后根据需要再次将其加载回去。
使用<keep-alive>，它将把您的组件缓存在内存中，这意味着当您在与它之间进行更改时，状态不会丢失。但是，这将在客户端计算机上使用更多的内存，因此请注意。

Answer 2

您可以使用vuex。它管理您应用的状态。但是，默认情况下它不是持久的。您可以编写一个vuex操作，将所做的更改存储在localStorage中，以使更改即使在网站重新加载后也可以持久保存。

我的网站页面路由时如何保存页面数据？（Vue Vue路由器）

2 个答案:

我的网站页面路由时如何保存页面数据？ （Vue Vue路由器）

2 个答案:

我的网站页面路由时如何保存页面数据？（Vue Vue路由器）