脚本宝典收集整理的这篇文章主要介绍了

Electron-vue简单整合VUEX

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">前言</h2> <p>最近在做一个小东西,是基于electron-vue的桌面客户端工具.由于自己是一个纯种的后端开发,对前端的知识基本还停留在基本JS,JQuery等,所以各位前端大神勿喷~</p> <h2 id="articleHeader1">场景</h2> <p>由于该项目是一个单页面的应用,所以需要在登陆后记录一些状态信息信息,以便在数据更新的时候,刷新页面数据.</p> <p>第一次使用electron和vue,本着越简单越好的原则,并没有太深入的了解vue.了解了基本的使用以后就开始了开发.所以,就将希望记录的信息都写在了sessionStorage.</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>这种方式虽然简单,但是将状态或者需要传递的信息都写在session中,毕竟是不合理的.后来接触到了vuex,故在此记录一下整个使用过程.</p> <h2 id="articleHeader2">什么是VUEX</h2> <blockquote> <p><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>x 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。<br />上面是官网的介绍,具体的vuex信息,请参阅官网 <a href="https://vuex.vuejs.org/zh-cn/intro.html" rel="nofollow noreferrer" target="_blank">vuex官网</a></p> </blockquote> <h2 id="articleHeader3">Electron-Vue整合vuex</h2> <ol> <li>前置条件<br />该工程是基于electron-vue的cli生成的标准结构工程</li> <li>在src/store/modules下面添加属于各自模块的Store JS文件,本例中定义为User.js <p><span class="img-wrap"><img data-src="/img/bVWEMT?w=344&amp;h=564" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> </li> <li> <p>在文件中定义需要记录state的变量 getters(为了在页面中获取值) mutations</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const state = { bucketId: '{bucketId}' // 默认值 } const getters = { bucketId: state=> state.bucketId } const mutations = { updateBucketId(state, bucketId) { state.bucketId = bucketId } } export default { state, mutations }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> state = { bucketId: <span class="hljs-string">'{bucketId}'</span> <span class="hljs-comment">// 默认值</span> } <span class="hljs-keyword">const</span> getters = { bucketId: <span class="hljs-function"><span class="hljs-params">state</span>=&gt;</span> state.bucketId } <span class="hljs-keyword">const</span> mutations = { updateBucketId(state, bucketId) { state.bucketId = bucketId } } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> { state, mutations }</code></pre> </li> <li> <p>我们在需要获取state值的vue文件中,添加如下内容:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="export default { computed: { bucketId() { return this.$store.state.User.bucketId } }, }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">export</span> <span class="hljs-selector-tag">default</span> { <span class="hljs-attribute">computed</span>: { <span class="hljs-built_in">bucketId</span>() { <a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a> <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.$store.state.User.bucketId } }, }</code></pre> <p>下面是使用变量的方式:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="<span style=&quot;float:right&quot;>{{ user<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a> }}</span>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/float" title="浏览关于“float”的文章" target="_blank" class="tag_link">float</a>:right"</span>&gt;</span>{{ username }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre> <p>注意:其中的User,要和变量所在的文件名相同,其实也就是模块的名字</p> </li> <li> <p>更新变量的方式:如果我们是在vue文件中,直接使用如下方式即可</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="this.$store.commit('updateBucketId', response.data[index].bucketId)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'updateBucketId'</span>, response.<span class="hljs-keyword">data</span>[<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex].bucketId)</code></pre> <p>如果我们要在工具js中使用的话,如下方式</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import store from '../store' store.commit('updateBucketId', '1111111')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'../store'</span> store.commit(<span class="hljs-string">'updateBucketId'</span>, <span class="hljs-string">'1111111'</span>)</code></pre> <p>截止,electron-vue和vuex的简单使用就结束了.因为也是实验和学习性质的demo,更多是记录一下如何使用.</p> </li> </ol> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Electron-vue简单整合VUEX

全部内容,希望文章能够帮你解决

Electron-vue简单整合VUEX

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过