<p><code></p> <h2 id="articleHeader0">使用vuex前后的对比</h2> <h3 id="articleHeader1">使用vuex前</h3> <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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//BookRecommend.vue <script></p> <p>import * as API from '../api/index'</p> <p>export default{ name:'bookrecommend', data () { return { oBRData:{} } }, methods: { getBookRecommendData(){ API.getBookRecommend() .then((response)=>{ this.oBRData = response.data; console.log(response) }) .catch((err)=>{ console.log(err) }) } }, mounted () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.getBookRecommendData(); } }</p> <p></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//BookRecommend.vue</span> &lt;script&gt; <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'../api/index'</span> <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">default</span>{ <span class="hljs-attr">name</span>:<span class="hljs-string">'bookrecommend'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">oBRData</span>:{} } }, <span class="hljs-attr">methods</span>: { getBookRecommendData(){ API.getBookRecommend() .then(<span class="hljs-function">(<span class="hljs-params">response</span>)=&gt;</span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.oBRData = response.data; <span class="hljs-built_in">console</span>.log(response) }) .catch(<span class="hljs-function">(<span class="hljs-params">err</span>)=&gt;</span>{ <span class="hljs-built_in">console</span>.log(err) }) } }, mounted () { <span class="hljs-keyword">this</span>.getBookRecommendData(); } } &lt;<span class="hljs-regexp">/script&gt;</span></code></pre> <h3 id="articleHeader2">使用vuex后</h3> <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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//BookRecommend.vue <script> import { map<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a> } from 'vuex'</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ name:'bookrecommend', computed: map<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>([ 'index' ]), methods: {</p> <p> }, mounted () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$store.dispatch('getBookRecommend'); } }</p> <p></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//BookRecommend.vue</span> &lt;script&gt; <span class="hljs-keyword">import</span> { map<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{ <span class="hljs-attr">name</span>:<span class="hljs-string">'bookrecommend'</span>, <span class="hljs-attr">computed</span>: mapState([ <span class="hljs-string">'index'</span> ]), <span class="hljs-attr">methods</span>: { }, mounted () { <span class="hljs-keyword">this</span>.$store.dispatch(<span class="hljs-string">'getBookRecommend'</span>); } } &lt;<span class="hljs-regexp">/script&gt; </span></code></pre> <h3 id="articleHeader3">变化</h3> <ul> <li> <p>剥离了state的管理</p> </li> <li> <p>剥离了异步请求</p> </li> <li> <p>.vue文件变得更加"纯粹"了</p> </li> </ul> <p>下面我们就从几个方面来描述一下vuex带给我们的变化。</p> <h2 id="articleHeader4">剥离了state的管理</h2> <p>这个当然是<code>vuex</code>最主要的任务了。</p> <p>将组件模块的<code>state</code>放到了<code>module</code>中,这里是放在了<code>module/index.js</code>中。</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//module/index.js import * as API from '../../api/index' import * as types from '../mutation-types' //BookRecommend.vue单文件的state管理 const state = { oBRData: {} } const actions = { ... } const mutations = { ... } export default { state, ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//module/index.js</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> API <span class="hljs-keyword">from</span> <span class="hljs-string">'../../api/index'</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">'../mutation-types'</span> <span class="hljs-comment">//BookRecommend.vue单文件的state管理</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> state = { <span class="hljs-attr">oBRData</span>: {} } <span class="hljs-keyword">const</span> actions = { ... } <span class="hljs-keyword">const</span> mutations = { ... } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { state, ... }</code></pre> <h2 id="articleHeader5">剥离了异步请求</h2> <p>上一篇<a href="https://segmentfault.com/a/1190000008707241">从交互到状态变化的Vuex</a>中说了<code>actions</code>的作用。</p> <p>将异步处理也放在了<code>module</code>中的<code>module/index.js</code>中。</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import * as API from '../../api/index' import * as types from '../mutation-types' const state = { oBRData: {} } //actions方便做异步操作,这里是获取数据 const actions = { getBookRecommend({ commit }, playload) { API.getBookRecommend() .then((response) => {<br /> commit(types.GET_BOOKRECOMMEND_DATA, {<br /> obr: response.data<br /> })<br /> console.log(response);<br /> })<br /> .catch((err) => {<br /> console.log(err)<br /> })<br /> }</p> <p>}</p> <p>const mutations = {<br /> ...<br /> }</p> <p>export default {<br /> state,<br /> actions<br /> ...<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> API <span class="hljs-keyword">from</span> <span class="hljs-string">'../../api/index'</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">'../mutation-types'</span> <span class="hljs-keyword">const</span> state = { <span class="hljs-attr">oBRData</span>: {} } <span class="hljs-comment">//actions方便做异步操作,这里是获取数据</span> <span class="hljs-keyword">const</span> actions = { getBookRecommend({ commit }, playload) { API.getBookRecommend() .then(<span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> { commit(types.GET_BOOKRECOMMEND_DATA, { <span class="hljs-attr">obr</span>: response.data }) <span class="hljs-built_in">console</span>.log(response); }) .catch(<span class="hljs-function">(<span class="hljs-params">err</span>) =&gt;</span> { <span class="hljs-built_in">console</span>.log(err) }) } } <span class="hljs-keyword">const</span> mutations = { ... } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { state, actions ... } </code></pre> <h2 id="articleHeader6">Modules</h2> <p>这个也是上篇文章没说的一个点,具体的见:<a href="http://vuex.vuejs.org/zh-cn/modules.html" rel="nofollow noreferrer" target="_blank">http://vuex.vuejs.org/zh-cn/m...</a></p> <p>最后通过<code>new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>x.Store</code>将分散的<code>module</code>合并在一起</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//组装module和跟级别的模块并导出 store 的地方 import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import * as mutations from './mutations' import index from './modules/index' Vue.use(Vuex) export default new Vuex.Store({ state: { where: '发现' }, actions, //将modules中的合并 modules: { index }, mutations })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//组装module和跟级别的模块并导出 store 的地方</span> <span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">'./actions'</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> mutations <span class="hljs-keyword">from</span> <span class="hljs-string">'./mutations'</span> <span class="hljs-keyword">import</span> index <span class="hljs-keyword">from</span> <span class="hljs-string">'./modules/index'</span> Vue.use(Vuex) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Vuex.Store({ <span class="hljs-attr">state</span>: { <span class="hljs-attr">where</span>: <span class="hljs-string">'发现'</span> }, actions, <span class="hljs-comment">//将modules中的合并</span> modules: { index }, mutations })</code></pre> <h2 id="articleHeader7">结果</h2> <p>这就是完整的state树,应该很清晰。</p> <p><span class="img-wrap"><img data-src="/img/bVKKSW?w=668&amp;h=938" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25997.html