See also Vue this $ store summary

Developed Vuethis $ Store Some Tips

Last promise some of the readers to develop some of the principles and techniques of this plugin, it is also summarized here.

1 Regular expression, the regular expression is not strange, the principle expression is the speed, and for a plugin for a code, Users must find faster to get feedback, tested 1000 lines Vue file matching all Mapxxx () , the API string, which only used 1 ms. However, the disadvantage is also very obvious. He is a context. For example

  mapState ({a: state => state.test,});  
Such a code, we can use the VSCode API to trigger a completion, use

/ \ bmapState \ (([\ ‘\ “] (. *) [\’ \ “] (?:, \ s *)? ((\ [\ s \ s] *? \]) | (\ {[\ s \ s] *? \})? \ S * \ ) / g Captured the above code, but friends, you have to consider, the function has three methods

MapState ({a: state => state .test, b (s) {return s.test;}, c: function (s) {return s.test;},};
   
How do you use? Regular expressions capture
A, B, C

three attributes and get the first parameter of three functions, do not rule out someone can do it, but it may cost a lot of time. 2 Abstract SyntaxTree (hereinafter referring to AST), I am using Babel

Parser

Babylon , AST and regular expressions, the advantages and disadvantages of the regular expression, the Parser disadvantage is relatively slow, but The AST obtained by Parser is more accurate for a code, you can get the parameters of the function, and many other information, there is no popularity here, there are many articles on the AST, and you can recommend this website astexplore, you can be on the website Practice, do some cool things. Opening

With these two tools, we can start writing code. Since the advantages and disadvantages of the two tools are complementary, I want to not be able to The more ideal way to combine them will be used, and the more ideal way to get it is to use the regular expression capture Mapxxx , find all the matched code segments After using the Parser to get AST, to analyze the parameters of the function Because the information in AST is very rich, we can get which function, as well as the first parameter of the function, so that the user uses

.

When triggering, even if you use State, we It can still give the right advice. But we have to get all the definitions in the Store, you must find the entrance file of the Store, how to find the port of the Store? Remember how we usually inject the Store?

Import Vue from ‘Vue’; import app from ‘./app.vue’;import store from’ ./store’;new Vue ({render: h = > h (app), store,}). $ mount (‘# app’);

 We only need to pass the AST of the text from Parser,To get the relative path of the Store, you can get the configuration objects in the instance in Vuex after getting the Store, get the configuration object to get all step by step, Mutations, State, Getters, Mutters, Mutations, State, Getters, Modules , Traversing all modules, in fact, each module is a configuration object of a Vuex instance, we can recurs the above code, get all the Store code, the last flow chart.   
Of course, we should pay attention to some matter when calling, such as objects may introduce from outside

Import Vue from ‘vue’; import vuex from ‘Vuex’; import state from ‘./state’;Vue.use (Vuex) ;Export Default New Vuex.Store ({State,}); 详解Vue This$Store总结

Directly defined in the form of
   
Export Default: true, state: {Number: 31}, getters: {testlen : state => state.number.length}, mutations: {change (state, {number}) {state.Number = number;}}}};

May be defined first, introduced in the form of object properties.
  const state = {name: 'jack'} Export Default {state: state}  

summary
 I will make this more than just a plug-in, use tools and ideas and we after sharing the next, it is a summary of the development of specific implementation venue here   
reflection

this vscode open source plug-ins, the number of users acquired or not achieve their desired level, reflect on their own down there

ide front end can have a lot of choice, not everyone with vscode

I have limited this plugin can bring function, .vue might be used in a data file in one or two vuex, installed this plugin can bring limited experience upgrade, and can not be compared to vetur this covers all commonly used functions.

before I think there Nuggets user suggestions, consider and vetur merger, but for now it seems there are not a lot of people need this plug-in, I’d better try to safeguard this project it.

that might be helpful to your website
  • vscode plugin official documentation, you can do a vscode taught plugin: vscode official document
  • astexplore here you can use the free practice of mainstream parser:: ast can see the structure of: astexplore

that’s all for this article, we want to be helpful to learn, I hope you will support Tumi cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment