<p><code></p> <p>前一段时间因为需要使用vue,特地去学习了一下。但是时间匆忙vuex没有接触到,今天闲暇时看了解了一下vuex,并做了一个小demo,用于记录vuex的简单使用过程。</p> <h2 id="articleHeader0">什么是<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>x?</h2> <p><strong>vuex</strong>是专门为<strong>vue.js</strong>应用程序开发的一种状态管理模式,当多个视图依赖于同一个状态或是多个视图均可更改某个状态时,将共享状态提取出来,全局管理。</p> <h2 id="articleHeader1">下面是一个计数器的例子</h2> <p>在src目录下创建一个store文件夹。<br />src/store.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><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' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0, show: '' }, getters: { counts: (state) => {<br /> return state.count<br /> }<br /> },<br /> mutations: {<br /> increment: (state) => {<br /> state.count++<br /> },<br /> decrement: (state) => {<br /> state.count--<br /> },<br /> changTxt: (state, v) => {<br /> state.show = v<br /> }<br /> }<br /> })</p> <p>export default store" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><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> Vue.use(Vuex) <a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> store = <span class="hljs-keyword">new</span> Vuex.Store({ state: { count: <span class="hljs-number">0</span>, show: <span class="hljs-string">''</span> }, getters: { counts: <span class="hljs-function"><span class="hljs-params">(state)</span> =&gt;</span> { <span class="hljs-keyword">return</span> state.count } }, mutations: { increment: <span class="hljs-function"><span class="hljs-params">(state)</span> =&gt;</span> { state.count++ }, decrement: <span class="hljs-function"><span class="hljs-params">(state)</span> =&gt;</span> { state.count-- }, changTxt: <span class="hljs-function"><span class="hljs-params">(state, v)</span> =&gt;</span> { state.show = v } } }) <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> <p><strong>state</strong>就是我们的需要的状态,状态的改变只能通过提交<strong>mutations</strong>,例如:</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="handleIncrement () { this.$store.commit('increment') }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>handleIncrement () { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$store.commit(<span class="hljs-string">'increment'</span>) }</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="changObj () { this.$store.commit('changTxt', this.obj) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>changObj () { <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'changTxt'</span>, <span class="hljs-keyword">this</span>.obj) }</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="changObj () { this.$store.commit('changTxt', { key:'' }) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>changObj () { <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'changTxt'</span>, { key:<span class="hljs-string">''</span> }) }</code></pre> <h2 id="articleHeader2">在main.js中引入store.js</h2> <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 store from './store/store' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({<br /> el: '#app',<br /> router,<br /> store,<br /> components: {<br /> App<br /> },<br /> template: '<App></span>'<br /> })" 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/store'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, store, components: { App }, template: <span class="hljs-string">'&lt;App/&gt;'</span> })</code></pre> <h2 id="articleHeader3">在组件中使用</h2> <p>在组建可以通过<code>$store.state.count</code>获得状态<br />更改状态只能以提交mutation的方式。</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="<template></p> <div class=&quot;store&quot;> <p> {{$store.state.count}} </p> <p> <el-button @click=&quot;handleIncrement&quot;><strong>+</strong></el-button><br /> <el-button @click=&quot;handleDecrement&quot;><strong>-</strong></el-button></p> <hr> <h3>{{$store.state.show}}</h3> <p> <el-input placeholder=&quot;请输入内容&quot; v-model=&quot;obj&quot; @change=&quot;changObj&quot; clearable><br /> </el-input> </div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { obj: '' } }, methods: { handleIncrement () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$store.commit('increment') }, handleDecrement () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$store.commit('decrement') }, changObj () { this.$store.commit('changTxt', this.obj) } } } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"store"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span> {{$store.state.count}} <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"handleIncrement"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"handleDecrement"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>-<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>{{$store.state.show}}<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入内容"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"obj"</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"changObj"</span> <span class="hljs-attr">clearable</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-input</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">obj</span>: <span class="hljs-string">''</span> } }, <span class="hljs-attr">methods</span>: { handleIncrement () { <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'increment'</span>) }, handleDecrement () { <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'decrement'</span>) }, changObj () { <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'changTxt'</span>, <span class="hljs-keyword">this</span>.obj) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>到这里这个demo就结束了,<br /><span class="img-wrap"><img data-src="/img/bVbf24w?w=565&amp;h=281" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="123" title="123" style="cursor: pointer;"></span></p> <p>感觉整个个过程就是一个传输数据的过程,有点类似全局变量,但是vuex是响应式的。<br />这里当然并没有完全发挥出全部的vuex,<br />vuex还在学习中,写这篇文章主要是记录其简单的使用过程。</p> <p></code></p>

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