DR：在本文中，我们将继续开发本系列第1部分中的看板板应用程序，以添加基本数据持久性和渐进式Web应用程序功能，例如离线支持和添加到移动主屏幕。这个项目的源代码在gitahub中可用。渐进式Web应用程序（PWAs）是普通的Web应用程序，它们展示了一些重要的属性，旨在以几种不同的方式丰富应用程序的用户体验。其中包括：渐进式-应用程序必须根据用户浏览器的功能优雅地降级或增强响应性—应用程序可以针对各种屏幕大小和设备进行适当的显示无处不在-无论你有一个伟大的互联网连接或根本没有连接的应用程序应该工作！安全-应用程序必须使用HTTPS技术来帮助保持用户的安全类似应用程序-应用程序应该采用一些技术和功能，让它感觉更像一个普通的移动应用程序，比如按钮通知和主屏幕按钮在本教程中，我们将从第1部分中获取看板板应用程序，并满足一些我们尚未讨论的标准。此外，我们还将添加一些基本的数据持久性，将backlog项记录到本地存储中，这样每当刷新页面时，这些项都会被持久化。这不仅很容易做到，而且在添加其他特性和测试应用程序时，它会使您的生活更加轻松。如果您还没有完成第1部分，那么本教程第1部分的源代码可以在GitHub上找到，因此您可以从这里开始学习。要开始使用该应用程序，请将GitHub存储库克隆到本地计算机，并将终端导航到项目目录。然后可以运行以下命令来启动应用程序：安装$npm要运行应用程序：$npm运行开发要查看应用程序正在运行，您应该能够打开：8080。下面是一个运行应用程序的示例，其中包含一些示例数据：将Vuex与本地存储集成我们要解决的第一件事是持久化数据存储的能力，这样当页面刷新时，不会丢失所有数据。因为我们之前已经将所有的数据存储逻辑放在一个地方，所以这个任务相当简单，但是为我们赢得了很多用户体验点。为此，我们将创建一个Vuex插件，将我们的Vuex状态序列化到本地存储中。然后，我们可以很容易地在我们的商店注册我们的插件。首先在src文件夹中创建一个名为plugins的新文件夹，然后在名为本地存储.js. 文件夹结构应该如下所示：├—src│   ├── 应用程序vue│–├—资产/│–├—组件/│   ├── 主.js│–├—插件/│   │   └── 本地存储.js│–├—路由器/│   ├── 商店.js然后，填充本地存储.js包括以下内容：//src/插件/本地存储.js导出默认存储=>{存储订阅（m，状态）=>{//将整个状态保存到本地存储localStorage.setItem（'boardState'，JSON.stringify（州））；});};在这里，我们使用存储区上的subscribe方法注册一个事件处理程序函数，每当存储区的状态发生更改时都会执行该函数。函数有两个参数：m，它是导致状态改变的变异的名称，state是存储的当前状态。通过处理此事件，我们可以在更改存储时将存储的整个状态保存到本地存储。这对于这个应用程序来说是可以的，因为Vuex商店中没有什么特别敏感的东西：只有您作为用户在看板板上创建待办事项列表时自己键入的内容。要使插件生效，淘客怎么做，需要在商店注册。打开src/商店.js并修改存储区的定义，使其包含插件。//src公司/商店.js从'Vue'导入Vue；从'Vuex'导入Vuex；//在这里导入插件模块从'./plugins/localStorage'导入localStoragePlugin；Vue.使用（Vuex）；导出默认新Vuex.商店({//接下来，使用存储区的"plugins"属性注册插件插件：[localStoragePlugin]，//商店的其他地方还是一样。。状态：{。。。},突变：{。。。}});既然我们可以保存backlog项，接下来要实现的是在应用程序启动时调用它们的能力。我们将在我们的存储中添加一个允许我们这样做的方法。不过，在src内部/商店.js，向存储添加一个新的变异，它将从本地存储读取数据并覆盖存储的当前状态：//src公司/商店.js从"Vue"导入Vue；从"Vuex"导入Vuex；从'./plugins/localStorage'导入localStoragePlugin；Vue.使用（Vuex）；/*eslint禁用无参数重新分配*/导出默认新Vuex.商店({// .. 其他商店创建选项突变{// .. 其他突变//加上这个变异可以让我们从存储中加载我们的状态initializeStore（）{常数数据=localStorage.getItem（'boardState'）；如果（数据）{此.replaceState(对象.分配(这个州, JSON.parse（数据））；}}}})// ...这个新方法将从本地存储中获取项，并使用JSON.parse然后在Vuex存储上调用replaceState。replaceState是一个Vuex API方法，它将用我们提供的任何数据替换整个Vuex状态。在这种情况下，它的效果是用我们刚刚从本地存储中获取的任何内容覆盖存储数据。最后一个任务是在正确的时间调用这个新方法，我们将在Vue系统初始化后执行此操作。打开src/主.js并修改视图选项，以便在调用创建的生命周期钩子时调用我们的方法：//src公司/主.js新Vue({el:"#应用程序"，路由器，储存，模板：''，组件：{App}，//新代码-初始化存储已创建（）{存储.提交（'initializeStore'）；}});因为initializeStore是一个变异，所以我们通过使用存储区的commit方法和变异名来"调用"它。通常，突变会伴随着描述存储如何变异的数据，但是在这种情况下，我们没有数据可以提交，因为突变本身将提供数据。如果现在运行应用程序，您应该会发现可以添加新的backlog项，刷新页面，并看到您的项仍然存在。太好了！最后一件事我要讲的是如何删除项目，大数据的概念，因为我们将很快开始建立一组积压项目，如果我们根本没有办法删除它们，云服务器推荐，它可能会变得有点混乱。删除待办事项我们可以先在我们的商店里添加一个新的变种，这样我们就可以在需要的时候移除商品。此变异将把要删除的项作为其单个参数。具体实施如下：//src公司/商店.js导出默认新Vuex.商店({// .. 其他选项突变：{// .. 其他突变//给定的项目id从backlog中删除一个项目id，这将删除该项目的变更removeItem（状态，项）{[状态.items.todo, 状态项进行中, state.items.完成].forEach公司(数组=>{常量索引数组=数组.findIndex（i=>i.id===项目编号);如果（indexInArray>-1）{阵列.拼接（索引数组，大数据是什么意思，1）；}});}}});代码一开始看起来有点混乱，但让我解释一下它在做什么。作为一个快速回顾，大数据分析是什么，商店的工作方式是保持三个数组来跟踪待办事项：todo、inProgress和done，其中"todo"项将出现在todo数组中，items in progress出现在inProgress数组中，依此类推。为了删除一个项目，我们需要知道该项目在三个数组中的哪一个。我们可以创建一个包含这三个数组的新数组，对它们进行迭代，然后使用findIndex找出哪个数组的索引为零或更大。一旦找到数组，就可以移除该项。因为这是一个突变，我们需要从某个地方来命名它。为此，我们将为backlog中的每个项添加一个新的"delete"按钮，这将允许用户删除该特定项。让我们从修改src/组件开始/Backlog.vue新的模板包含了新的按钮。小心，因为我也稍微移动了徽章元素的位置。您的组件最终应该如下所示：