Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex

Time:2021-3-6

VueThis$Store

Problems to be solved

When using vuex to manage the state of your application, because there are too many states, you have to open the vuex definition file every time to copy the function name or state name at the time of definition for correctness, which wastes a lot of time. In order to solve this problem, this vscode plug-in is developed.

By using AST and regular expression, the definition of all files in the store can be obtained. When the user uses the. Vue file, the
At present, most of the examples defined in the official website of vuex are supported

install

Search vuethis & dollar; store in the extension and install it.

use

When you open a. Vue file, the plug-in will scan from your entry file to get all the modules of your store
Block, and (actions, mutations, getters, state) in the module, save the necessary definition information to give the reference
It is shown that. When your vscode plug-in has the following icon in the lower left corner
Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex
Then it means that the scan is successful and you can get the correct prompt. If x is on the far right, it means that an error has occurred (I set the default value)
The entry path is SRC under the working root path/ main.js , if it fails, an alternate entry file is used
,src/ index.js If it still fails, you will be prompted with an error and let yourself declare the entry file).
youshift+(cmd|ctrl)+pEnter specify entry path and enter your index file
Where to make a Vue instance), enter. The plug-in will rescan the entry file.

characteristic

  • Support the most basicthis.$store.state.countType prompt when you define it in other modules
    For other states, you can get the prompt of the next module and all corresponding states.
    Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex
  • At the same time, mapstate is supported. When the first parameter is entered, all possible next modules will be prompted
    The module of the namespace is consistent with the mechanism of the official website. When a namespace is set, only the current namespace is prompted
    State under.
    Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex
  • Support fromthis.$store.getters.xxxIn this way, getters can be obtained directly, and mapgetters is also supported
    The second parameter is in the form of an array or an object
    Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex
  • Same supportthis.$store.commitandthis.$store.dispatchTips
    Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex

Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex

  • Support mapmutations parameter as array and object prompt
    Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex
  • Support mapactions parameter for array and object prompt
    Recommend a good vscode plug-in: a vscode plug-in that can give store definition information in vuex
  • Monitor the change of your store folder. When the file changes, the definition information will be collected again and the prompt will be updated

Some tips

Because I don’t have much experience in using large-scale applications, there are not many tested projects. I found one on GitHub
It’s a classic projectvue-elmAnd passed the test
. There may be other bugs that are not found. If you find any bugs in use, you can mention issue, the most important
Well, you can give me the directory structure of the store, and it’s best to give me all the files in the original store directory. Of course, this is OK
If some secrets can be involved, you can keep a few test data without changing the original structure. At the same time, I hope very much
I hope you can give me more suggestions. I hope this vscode plug-in can help developers.

Current problems

  • Cannot be compatible with 1.28 or below, only the latest version. This problem can’t be solved at present, and it’s my first development
    Vscode plug-in, I don’t know much about vscode compatibility.
  • There are no friendly error prompts.
  • Because there are many ways to write modules in vuex, they can be defined directly in the object, can be introduced from the outside, and can be defined in the
    File defined in the direct use{mutations}This kind of method definition may not be covered by some writing methods
    You can see the prompt.

supplement

If you can see it here, it means that you still approve of this project, so you have the cheek to put down your project link first.

Project address:vue-this-store

The code is not good enough. Tap ^ – ^, the issue mentioned may not be solved in a short time. It will be the end of the term soon, and it will continue after that
Maintain this project. If it helps you, give it a star^_ ^.

Recommended Today

Rust and python: why rust can replace Python

In this guide, we compare the rust and python programming languages. We will discuss the applicable use cases in each case, review the advantages and disadvantages of using rust and python, and explain why rust might replace python. I will introduce the following: What is rust? What is Python? When to use rust When to […]