文章目录

• • • 关于store2
    • • 什么情况下使用store2
      • store2的地址
    • 处理本地存储的JavaScript库
    • • crypt.io
    • Vuex unknown action type 报错处理
    • chrome中安装vue-devtools工具

关于store2

什么情况下使用store2

用户在填写一个庞大表单时（诸如成本合同），如果在填到一大半之时偶发意外，例如页面被重载了，前功尽弃，已填的内容可能丢失。倘若使用了localStorage 先将所填的数据存在用户本地，待到适宜时机再正式提交。在使用localStorage/sessionStorage 时，并不情愿直接使用浏览器提供的 API。

此外，因 Storage 存储的都是字符串，如果保存的是 JSON 字符串，使用之前需要 parse 一次在所难免。我期望是能通过一个 API 尽量操作完取值和设置值的操作。

此外，在多团队合作的项目中，还应支持命名空间之类的隔离措施，这通常是在同一域名的情况下，团队之间对 localStorage 命名时容易发生冲突，这类风波导致一方的逻辑可能遭到破坏。

当前 store2 （npm：store2）是较为多人使用的一个 Storage 替代品，无论是要简洁的 API ，或者命名空间，都可以实现。

store2的地址

1. GitHub地址：https://github.com/nbubna/store
2. npm镜像仓库地址：https://www.npmjs.com/package/store2

处理本地存储的JavaScript库

crypt.io

crypt.io使用标准JavaScript加密库实现安全的浏览器存储。使用crypto.io时，有三个存储选项：sessionStorage，localStorage或cookie

let storage = crypto;
let book = { title: ‘JavaScript’, price: 13 };storage.set(‘book’, book, function(error, results) {if (error) {throw error;}// Do something
});storage.get(‘book’, function(error, results) {if (error) {throw error;}// Do something
});

Vuex unknown action type 报错处理

• 在项目中使用模块开发
  
• 模块结构，permission.js
  
• 注册模块
  
• 对于里面的方法，引用的时候直接下图所示，会出现 unknown action type 的报错
  
• 正确的写法是，在方法之前加上模块名称
  
• 另一种不用加模块名称的写法是：模块结构，permission.js
  
• 引用可以直接使用方法
  

chrome中安装vue-devtools工具

1. 比较好用、快速的一种方式
2. 创建一个空文件夹，打开“命令提示符工具”，在空文件夹中执行npm install vue-devtools命令
   
3. 安装完成后，进入该文件夹\devtools\node_modules\vue-devtools\vender 目录下，找到manifest.json文件，修改persistent属性值为true
   
4. 打开谷歌浏览器，“管理扩展程序”，选择“加载已解压的拓展程序”，将 /devtools文件夹添加即可
5. 重启浏览器，如果是vue应用程序的话，开发者工具页面会出现“Vue”按钮
   
6. 完成上述步骤就可以开发使用vue-devtools调试应用程序了