Problems encountered
Currently, if we code with projects on Nuxt.js platform, the use of global functions is extremely convenient, avoiding code duplication and reducing the syntax of importing plugins, utils, … inside the component. So how to handle it, we will go to the following example.
Simple example
Currently we have 2 files: 1 plugin handle-error.js and config file of Nuxt.js. These plugins work to log messages and log status codes, we can handle them for 404 codes that allow redirecting of certain pages or 500 code to handle other types.
A lot of flexibility to customize the Error handle, general configuration for all components after calling the API for processing.
1 2 3 | --plugins/handle-error.js --nuxt.config.js |
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span> <span class="token parameter">context <span class="token punctuation">,</span> inject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token function-variable function">handleError</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> response <span class="token punctuation">.</span> data <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// log lại message</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> response <span class="token punctuation">.</span> status <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// log lại status code</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// Inject $handleError(error) in Vue, context and store.</span> <span class="token function">inject</span> <span class="token punctuation">(</span> <span class="token string">'handleError'</span> <span class="token punctuation">,</span> handleError <span class="token punctuation">)</span> <span class="token punctuation">;</span> context <span class="token punctuation">.</span> $handleError <span class="token operator">=</span> handleError <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Setup config
1 2 3 4 | plugins <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'@/plugins/handle-error'</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> |
From now on inside the component we can use this.$handleError(error) , no need to import before because registered as global.
For example:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">async</span> <span class="token function">onSearch</span> <span class="token punctuation">(</span> <span class="token parameter">keyword</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">await</span> evaluationApi <span class="token punctuation">.</span> <span class="token function">searchSomeThing</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> <span class="token punctuation">{</span> keyword <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$handleError</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// dùng ở đây khá là tiện lợi</span> <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> isSearching <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> |
Extend callback function
To be more flexible we can use the callback function inside the custom plugins handleError
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span> <span class="token parameter">context <span class="token punctuation">,</span> inject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token function-variable function">handleError</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">error <span class="token punctuation">,</span> callback <span class="token operator">=</span> <span class="token keyword">null</span></span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> response <span class="token punctuation">.</span> data <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> response <span class="token punctuation">.</span> status <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// custom callback function để flexible hơn với handle error.</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> callback <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">callback</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// Inject $handleError(error) in Vue, context and store.</span> <span class="token function">inject</span> <span class="token punctuation">(</span> <span class="token string">'handleError'</span> <span class="token punctuation">,</span> handleError <span class="token punctuation">)</span> <span class="token punctuation">;</span> context <span class="token punctuation">.</span> $handleError <span class="token operator">=</span> handleError <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Our onSearch function can then write more
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">async</span> <span class="token function">onSearch</span> <span class="token punctuation">(</span> <span class="token parameter">keyword</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">await</span> evaluationApi <span class="token punctuation">.</span> <span class="token function">searchSomeThing</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> <span class="token punctuation">{</span> keyword <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$handleError</span> <span class="token punctuation">(</span> error <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> isSearching <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> |
Conclude
Hopefully for this little example, people can integrate into the project related to Nuxt.js, as well as agree on general rules of many different types of global variables depending on the purpose of use.