<p><code></p> <h1 id="articleHeader0">理解vuex</h1> <p>vuex是与redux类似的应用于vue应用程序的前端数据处理框架。vuex汲取了redux很多优秀的特性,比如说单一的状态树,通过dispatch一个action来更新状态树。同时由于vuex只是针对vue的,其本身与vue的契合度更高,也更加轻量,可以在不需要第三方库的情况下支持异步请求。</p> <p><span class="img-wrap"><img data-src="/img/bVEMMt?w=1093&amp;h=682" src="/img/bVEMMt?w=1093&amp;h=682" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p>在vuex中存在几个重要的概念:<br />1.state: 与redux的state一样,是整个应用级别的状态树,即“single state tree”。<br />2.getters: 在组件内部获取state。<br />3.mutations: commit mutations是唯一更新state的方式。<br />4.actions:执行异步操作,分发mutainons。<br />5.modules:将前端的各个数据模块根据需要互相独立,防止在不断的迭代中,数据臃肿混乱。<br />仔细一看,和redux貌似没毛区别呢。。。<br />getters相当于connect<br />mutations相当于reducer</p> <h1 id="articleHeader1">在vue中应用vuex</h1> <p>其实在vue中用vuex十分简单,总结起来主要就是两步:</p> <ol> <li> <p>创建store</p> </li> <li> <p>在组件中挂在store</p> </li> </ol> <h3 id="articleHeader2">创建store</h3> <p>首先我们要生成一个store实例</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 Vue from 'vue' import Vuex from 'vuex' import * as modules from './modules' import actions from './action' import * as getters from './getters' Vue.use(Vuex) const store = new Vuex.Store({ modules, actions, getters, }) export default store" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><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> modules <span class="hljs-keyword">from</span> <span class="hljs-string">'./modules'</span> <span class="hljs-keyword">import</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">'./action'</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> getters <span class="hljs-keyword">from</span> <span class="hljs-string">'./getters'</span> Vue.use(Vuex) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> store = <span class="hljs-keyword">new</span> Vuex.Store({ modules, actions, getters, }) <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> store</code></pre> <h4>定义action</h4> <p>在action.js文件中定义了一个getData方法</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="export default { getData({ commit }) { commit('getCatalog') } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { getData({ commit }) { commit(<span class="hljs-string">'getCatalog'</span>) } }</code></pre> <p>在action我们接受了commit方法,它会分发mutation,这里在组件中dispatch getData方法后,会分发到getCatalog的mutation中。<br />另外在action中,我们还可以调用异步的方法。</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="export default { async getData({ commit }) { commit('getCatalog', await getApiData()) } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-keyword">async</span> getData({ commit }) { commit(<span class="hljs-string">'getCatalog'</span>, <span class="hljs-keyword">await</span> getApiData()) } }</code></pre> <h4>定义mutations</h4> <p>getApiData返回的结果会作为第二个参数被传入到mutation中,在mutation中我们可以修改state。</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="const state = { catalog: [], } const mutations = { getCatalog(state, response) { state.catalog = response.body.catalog } } export default { state, mutations, }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-keyword">const</span> state = { catalog: [], } <span class="hljs-keyword">const</span> mutations = { getCatalog(state, response) { state.catalog = response.body.catalog } } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { state, mutations, }</code></pre> <h4>根据需要定义getters</h4> <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="export const getCatalog = state => { return state.article.catalog }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> getCatalog = <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> { <span class="hljs-keyword">return</span> state.article.catalog }</code></pre> <h3 id="articleHeader3">在组件中挂在store</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="import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' import store from './vuex/store' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes, }) new Vue({ el: '#app', router: router, store, })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> routes <span class="hljs-keyword">from</span> <span class="hljs-string">'./routes'</span> <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'./vuex/store'</span> Vue.use(VueRouter) <span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({ mode: <span class="hljs-string">'history'</span>, routes, }) <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router: router, store, })</code></pre> <p>好的大功告成。</p> <h3 id="articleHeader4">在组件中调用dispatch,以及获取getters</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="<script type=&quot;text/javascript&quot;> import { mapGetters, mapActions } from 'vuex' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { computed: mapGetters({ catalog: 'getCatalog', }), methods: mapActions([ &quot;getData&quot; ]), beforeMount () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$store.dispatch('getData') }, } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> { mapGetters, mapActions } <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">computed</span>: mapGetters({ <span class="hljs-attr">catalog</span>: <span class="hljs-string">'getCatalog'</span>, }), <span class="hljs-attr">methods</span>: mapActions([ <span class="hljs-string">"getData"</span> ]), beforeMount () { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$store.dispatch(<span class="hljs-string">'getData'</span>) }, } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p></code></p>

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