代码拉取完成，页面将自动刷新
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Vue - kaelinda
</title>
<link href="atom.xml" rel="alternate" title="kaelinda" type="application/atom+xml">
<link rel="stylesheet" href="asset/css/foundation.min.css" />
<link rel="stylesheet" href="asset/css/docs.css" />
<script src="asset/js/vendor/modernizr.js"></script>
<script src="asset/js/vendor/jquery.js"></script>
<script src="asset/highlightjs/highlight.pack.js"></script>
<link href="asset/highlightjs/styles/github.css" media="screen, projection" rel="stylesheet" type="text/css">
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
function before_search(){
var searchVal = 'site:kaelinda.top ' + document.getElementById('search_input').value;
document.getElementById('search_q').value = searchVal;
return true;
}
</script>
</head>
<body class="antialiased hide-extras">
<div class="marketing off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<section class="top-bar-section">
<div class="row">
<div style="position: relative;width:100%;"><div style="position: absolute; width:100%;">
<ul id="main-menu" class="left">
<li id=""><a target="_self" href="index.html">最近更新</a></li>
<li id=""><a target="_self" href="archives.html">归档目录</a></li>
<li id="ios.css"><a target="_self" href="ios.html">iOS</a></li>
<li id="swift.css"><a target="_self" href="swift.html">Swift</a></li>
<li id="reactnative.css"><a target="_self" href="reactnative.html">RN</a></li>
<li id="js.css"><a target="_self" href="js.html">JS</a></li>
<li id="shell.css"><a target="_self" href="shell.html">shell</a></li>
<li id="coding.css"><a target="_self" href="coding.html">编程</a></li>
<li id="live.css"><a target="_self" href="live.html">随笔</a></li>
<li id="app.css"><a target="_blank" href="app.html">APP推荐</a></li>
</ul>
<ul class="right" id="search-wrap">
<li>
<form target="_blank" onsubmit="return before_search();" action="http://google.com/search" method="get">
<input type="hidden" id="search_q" name="q" value="" />
<input tabindex="1" type="search" id="search_input" placeholder="Search"/>
</form>
</li>
</ul>
</div></div>
</div>
</section>
</nav>
<nav class="tab-bar show-for-small">
<a href="javascript:void(0)" class="left-off-canvas-toggle menu-icon">
<span> kaelinda</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><a target="_self" href="index.html">最近更新</a></li>
<li><a target="_self" href="archives.html">归档目录</a></li>
<li><a target="_self" href="ios.html">iOS</a></li>
<li><a target="_self" href="swift.html">Swift</a></li>
<li><a target="_self" href="reactnative.html">RN</a></li>
<li><a target="_self" href="js.html">JS</a></li>
<li><a target="_self" href="shell.html">shell</a></li>
<li><a target="_self" href="coding.html">编程</a></li>
<li><a target="_self" href="live.html">随笔</a></li>
<li><a target="_blank" href="app.html">APP推荐</a></li>
<li><label>Categories</label></li>
<li><a href="reactnative.html">React-Native</a></li>
<li><a href="ios.html">iOS</a></li>
<li><a href="app.html">MacAPP</a></li>
<li><a href="swift.html">Swift</a></li>
<li><a href="js.html">JavaScript</a></li>
<li><a href="vue.html">Vue</a></li>
<li><a href="shell.html">shell</a></li>
<li><a href="%E7%BD%91%E7%BB%9C.html">网络</a></li>
</ul>
</aside>
<a class="exit-off-canvas" href="#"></a>
<section id="main-content" role="main" class="scroll-container">
<script type="text/javascript">
$(function(){
$('#menu_item_index').addClass('is_active');
});
</script>
<div class="row">
<div class="large-8 medium-8 columns">
<div class="markdown-body home-categories">
<div class="article">
<a class="clearlink" href="15168925544178.html">
<h1>从零开始学习使用 vuex</h1>
<div class="a-content">
<div class="a-content-text">
<blockquote>
<p>本文是建立在，对vuex理论有一定理解的基础上写的。<br/>
因为官方文档的写法是 针对 有一定的vue开发经验 和 JavaScript 有一定理解的开发者看的，对于小白级别的我来说，理解起来有一定困难。所以，唯一想我一向的小白想尽快上手vuex....</p>
</blockquote>
<p><a href="https://vuex.vuejs.org/zh-cn/installation.html">详情请参考vuex官方文档</a></p>
<h2 id="toc_0">安装</h2>
<h3 id="toc_1">直接下载 CDN 安装</h3>
<p>CDN 链接地址：<code>https://unpkg.com/vuex</code><br/>
指定到固定版本：<code>https://unpkg.com/vuex@2.0.0</code></p>
<pre><code class="language-text"><script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
</code></pre>
<h3 id="toc_2">npm 方式安装 （推荐！简单快捷，便于管理）</h3>
<p><code>npm install -save vuex</code></p>
<h3 id="toc_3">yar</h3>
<p><code>yarn add vuex</code></p>
<h3 id="toc_4">自己构建</h3>
<pre><code class="language-bash">git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build
</code></pre>
<h2 id="toc_5">导入vue工程中使用</h2>
<ul>
<li>main.js 入口文件</li>
</ul>
<blockquote>
<p>按照如下方式导入，工程就可以使用vuex的环境了</p>
</blockquote>
<pre><code class="language-javascript">// 导入vuex头文件
import Vuex from 'vuex'
// 这里表示全局导入vuex
Vue.use(Vuex)
// 这里是我自定义的store文件 导出store对象
import store from '@/study/vuexStudy/store/store.js'
</code></pre>
<blockquote>
<p>入口组件<App/>中，绑定store</p>
</blockquote>
<pre><code class="language-text">new Vue({
el: '#app',
template: '<App/>',
components: { App },
store
})
</code></pre>
<p>到这里 算是万里长征走了第一步。</p>
<h3 id="toc_6">创建Store对象</h3>
<h4 id="toc_7">store 的结构:</h4>
<pre><code class="language-javascript">export const store = new Vuex.Store({
// ------state:状态值存储,这里可以存储n个状态的值
state: {count: '1'},
// ------getter:store中定义的getters可以认为是store的计算属性
// getters接收state作为其第一个参数
getters: {
done (state) {
return state.count + 5
}
},
// ------mutations:状态值的改变，操作状态值
// $store.commit(mutationsName, params)是更改状态值的唯一方法
mutations: {
increment (state) {
// 变更状态
state.count++
}
},
// ------actions:可以认为是包装了mutations的function 需要用 dispatch(actionName) 的方式去派发
actions: {
add (context) {
context.commit('increment')
},
addAsync (context) {
// 延时1秒
setTimeout(() => {
context.commit('increment')
}, 1000)
}
},
// store可以合并几个子store，以此来进行项目的模块化
modules: {
a: moduleA,
b: moduleB
}
})
</code></pre>
<h4 id="toc_8">编辑定义store实体对象：</h4>
<ul>
<li>store.js文件中</li>
</ul>
<blockquote>
<p>这里为了便于抽离 我们外部声明城对象实体后嵌入绑定到store</p>
</blockquote>
<ol>
<li><p>创建一个store对象</p>
<pre><code class="language-javascript">export default const store = new Vuex.Store({
state,//绑定之前创建的state对象到store中<br/>
mutations,<br/>
getters,<br/>
actions,<br/>
modules<br/>
})
</code></pre></li>
<li><p>定义一个状态对象 <code>state</code>（实体）</p>
<pre><code class="language-javascript">const state = {
count: 0,<br/>
state1: 1,<br/>
state2: 2,<br/>
state3: 3<br/>
}
</code></pre></li>
<li><p>定义getters对象</p>
<pre><code class="language-text">const getters = {
done (state) {<br/>
return state.count + 5<br/>
},<br/>
getState1: function (state) {<br/>
return state.state3<br/>
},<br/>
// ES6简写<br/>
getState2: state => state.state2<br/>
}
</code></pre></li>
<li><p>.vue 文件中直接获取state值</p>
<p>首先导入辅助函数：</p>
<pre><code class="language-text">import {
mapState, <br/>
mapGetters, <br/>
mapMutations, <br/>
mapActions <br/>
} from 'vuex'
</code></pre>
<ul>
<li>第一种方式：绑定到组件属性中，直接获取 （一般不用这个，绑定到computed中是最合适的）<code>$store.state.count</code>并使用</li>
</ul>
<pre><code class="language-javascript">export default {
data() {<br/>
return {<br/>
testCount: this.$store.state.count<br/>
}<br/>
}<br/>
}
</code></pre>
<ul>
<li>第二种方式： 绑定到计算属性中（适合对store中的原始状态值进行一定处理的情况）</li>
</ul>
<pre><code class="language-javascript">export default {
data() {<br/>
return {<br/>
testCount: this.$store.state.count<br/>
}<br/>
},<br/>
computed:{<br/>
testComputedCount1: function () {<br/>
return this.$store.state.count + 22<br/>
}<br/>
}<br/>
}
</code></pre>
<ul>
<li>第三种方式：mapState辅助函数绑定状态state值到组件计算属性中</li>
</ul>
<pre><code class="language-javascript">export default {
data() {<br/>
return {<br/>
testCount: this.$store.state.count<br/>
}<br/>
},<br/>
computed:{<br/>
testComputedCount1: function () {<br/>
return this.$store.state.count + 22<br/>
},<br/>
...mapState({<br/>
count: state => state.count,<br/>
mapState1: state => state.state1,<br/>
mapState2: state => state.state2<br/>
}),<br/>
}<br/>
}
</code></pre>
<ul>
<li>第四种方式：使用store中绑定的getters进行获取</li>
</ul>
<pre><code class="language-javascript">export default {
data() {<br/>
return {<br/>
testCount: this.$store.state.count<br/>
}<br/>
},<br/>
computed:{<br/>
testComputedCount1: function () {<br/>
return this.$store.state.count + 22<br/>
},<br/>
...mapState({<br/>
count: state => state.count,<br/>
mapState1: state => state.state1,<br/>
mapState2: state => state.state2<br/>
}),<br/>
testComputedGettersCount2: funtion () {<br/>
return this.$store.getters.done<br/>
}<br/>
}<br/>
}
</code></pre>
<ul>
<li>第五种方式： 借助mapGetters辅助函数绑定getters到vue的计算属性中</li>
</ul>
<pre><code class="language-javascript">export default {
data() {<br/>
return {<br/>
testCount: this.$store.state.count<br/>
}<br/>
},<br/>
computed:{<br/>
testComputedCount1: function () {<br/>
return this.$store.state.count + 22<br/>
},<br/>
...mapState({<br/>
count: state => state.count,<br/>
mapState1: state => state.state1,<br/>
mapState2: state => state.state2<br/>
}),<br/>
testComputedGettersCount2: funtion () {<br/>
return this.$store.getters.done<br/>
},<br/>
//直接绑定方法数组的方式<br/>
...mapGetters([<br/>
'getState1',<br/>
'getState2',<br/>
'getState3'<br/>
]),<br/>
//重命名对象绑定方式<br/>
...mapGetters({<br/>
mapGetterState1: 'getState1',<br/>
mapGetterState3: 'getState3'<br/>
}),<br/>
}<br/>
}
</code></pre></li>
<li><p>触发动作行为改变状态值</p>
<blockquote>
<p>方式一：$store.commit('mutationsName')</p>
<p>方式二：$store.dispatch('actionsName') </p>
</blockquote>
<p>store.js文件中：</p>
<ul>
<li>初始化 mutations 和 actions (相当于是methods)</li>
</ul>
<pre><code class="language-text">const mutations = {
increment (state) {<br/>
// 变更状态<br/>
state.count = state.count * 5<br/>
}<br/>
}
</code></pre>
<pre><code class="language-text">import {action4} from '@/path/actions.js'
const actions = {<br/>
// 同步方法<br/>
add: function (context) {<br/>
context.commit('increment')<br/>
},<br/>
// 延时操作 用于网络请求啊啥的<br/>
addAsync (context) {<br/>
// 延时1秒<br/>
setTimeout(() => {<br/>
context.commit('increment')<br/>
}, 1000)<br/>
},<br/>
// 简写方式<br/>
action2 (context) {<br/>
context.commit('increment')<br/>
},<br/>
// 抽离到单独文件中，在导进封装好的变量来直接使用即可（导进来的目的是为了接收第一个参数：state），不绑定到store，需要手动传入store对象<br/>
action4: action4,<br/>
}
</code></pre></li>
</ol>
<ul>
<li><p>绑定action 和 mutations 到 methods，然后 调用就行了</p>
<pre><code class="language-text">export default {
methods: {<br/>
// 数组形式直接载入<br/>
...mapActions([<br/>
'add'<br/>
]),<br/>
// 重命名形式 <br/>
...mapActions({<br/>
add: 'add',<br/>
addAsync: 'addAsync',<br/>
action4: 'action4'<br/>
}),<br/>
// 同上<br/>
...mapMutations([<br/>
'increment'<br/>
]),<br/>
...mapMutations({<br/>
incrementMutation: 'increment'<br/>
})<br/>
}<br/>
}
</code></pre></li>
</ul>
</div>
</div>
</a>
<div class="read-more clearfix">
<div class="more-left left">
<span class="date">2018/1/25</span>
<span>posted in </span>
<span class="posted-in"><a href='vue.html'>Vue</a></span>
</div>
<div class="more-right right">
<span class="comments">
</span>
</div>
</div>
</div><!-- article -->
<div class="row">
<div class="large-6 columns">
<p class="text-left" style="padding-top:25px;">
</p>
</div>
<div class="large-6 columns">
<p class="text-right" style="padding-top:25px;">
</p>
</div>
</div>
</div>
</div><!-- large 8 -->
<div class="large-4 medium-4 columns">
<div class="hide-for-small">
<div id="sidebar" class="sidebar">
<div id="site-info" class="site-info">
<div class="site-a-logo"><img src="https://ws1.sinaimg.cn/large/006tNc79ly1fmpk9088gsj30sg0sgn33.jpg" /></div>
<h1>kaelinda</h1>
<div class="site-des">倘若我心中的山水，你眼中能看到，我便一步一莲花祈祷</div>
<div class="social">
<a target="_blank" class="twitter" target="_blank" href="https://twitter.com/KaelLVLinda" title="Twitter">Twitter</a>
<a target="_blank" class="github" target="_blank" href="https://github.com/Kaelzzs" title="GitHub">GitHub</a>
<a target="_blank" class="email" href="mailto:zhouzuosong_kael@163.com" title="Email">Email</a>
<a target="_blank" class="rss" href="atom.xml" title="RSS">RSS</a>
</div>
</div>
<div id="site-categories" class="side-item ">
<div class="side-header">
<h2>Categories</h2>
</div>
<div class="side-content">
<p class="cat-list">
<a href="reactnative.html"><strong>React-Native</strong></a>
<a href="ios.html"><strong>iOS</strong></a>
<a href="app.html"><strong>MacAPP</strong></a>
<a href="swift.html"><strong>Swift</strong></a>
<a href="js.html"><strong>JavaScript</strong></a>
<a href="vue.html"><strong>Vue</strong></a>
<a href="shell.html"><strong>shell</strong></a>
<a href="%E7%BD%91%E7%BB%9C.html"><strong>网络</strong></a>
</p>
</div>
</div>
<div id="site-categories" class="side-item">
<div class="side-header">
<h2>Recent Posts</h2>
</div>
<div class="side-content">
<ul class="posts-list">
<li class="post">
<a href="15523077857608.html">OC中枚举写法 以及 字符串枚举探索</a>
</li>
<li class="post">
<a href="15522686353535.html">iOS 动画全解 (1)</a>
</li>
<li class="post">
<a href="15501356584731.html">UITableView顶部空白的几种解决办法</a>
</li>
<li class="post">
<a href="15488351784332.html">Objective-C中的字符串类型枚举 探索</a>
</li>
<li class="post">
<a href="15409691048860.html">【Swift笔记】引用计数</a>
</li>
</ul>
</div>
</div>
</div><!-- sidebar -->
</div><!-- hide for small -->
</div><!-- large 4 -->
</div><!-- row -->
<div class="page-bottom clearfix">
<div class="row">
<p class="copyright">Copyright © 2015
Powered by <a target="_blank" href="http://www.mweb.im">MWeb</a>,
Theme used <a target="_blank" href="http://github.com">GitHub CSS</a>.</p>
</div>
</div>
</section>
</div>
</div>
<script src="asset/js/foundation.min.js"></script>
<script>
$(document).foundation();
function fixSidebarHeight(){
var w1 = $('.markdown-body').height();
var w2 = $('#sidebar').height();
if (w1 > w2) { $('#sidebar').height(w1); };
}
$(function(){
fixSidebarHeight();
})
$(window).load(function(){
fixSidebarHeight();
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><script type="text/x-mathjax-config">MathJax.Hub.Config({TeX: { equationNumbers: { autoNumber: "AMS" } }});</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
