Collection of vue2 development tools

about store2

When to use store2

When a user is filling out a huge form (such as a cost contract), if an accident happens when more than half of the form is filled, for example, the page is reloaded, all previous efforts will be wasted, and the filled content may be lost. If localStorage is used, the filled data will be stored in the user's local area first, and then formally submitted at an appropriate time. When using localStorage/sessionStorage, you are reluctant to directly use the API provided by the browser.

In addition, because Storage stores all strings, if you save a JSON string, it is inevitable to parse it once before using it. I expect to be able to complete the operations of getting and setting values ​​as much as possible through an API.

In addition, in multi-team cooperation projects, isolation measures such as namespaces should also be supported. Usually, in the case of the same domain name, conflicts are likely to occur when teams name localStorage. been destroyed.

The current store2 (npm: store2) is a storage alternative used by more people, whether it is a concise API or a namespace, it can be realized.

address of store2

1. GitHub address: https://github.com/nbubna/store
2. Npm mirror warehouse address: https://www.npmjs.com/package/store2

A JavaScript library that handles local storage

crypt.io

crypt.io uses standard JavaScript encryption libraries for secure browser storage. When using crypto.io, there are three storage options: sessionStorage, localStorage or 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 error handling

• Use module development in the project
  
• module structure, permission.js
  
• registration module
  
• For the methods inside, when quoting, directly as shown in the figure below, an error of unknown action type will appear
  
• The correct way to write it is to add the module name before the method
  
• Another way of writing without adding the module name is: module structure, permission.js
  
• The reference can directly use the method
  

Install vue-devtools tool in chrome

1. A more convenient and fast way
2. npm install vue-devtoolsCreate an empty folder, open the "Command Prompt Tool", and execute the command in the empty folder
   
3. After the installation is complete, enter the folder \devtools\node_modules\vue-devtools\venderdirectory, find the manifest.json file, and modify the persistent attribute value to true
   
4. Open Google Chrome, "Manage Extensions", select "Load Unpacked Extensions", and add the /devtools folder
5. Restart the browser, if it is a vue application, the "Vue" button will appear on the developer tools page
   
6. After completing the above steps, you can develop and use vue-devtools to debug the application