开局一张图，理解Vuex

Vuex作为一个组件来使用，可以更好的管理和维护整个项目的组件状态。

Vuex 的基本用法

vue-router基础上开发
首先通过Npm进行安装：

npm install --save vuex

import Vue from 'vue'；
import VueRouter from 'vue-router'；
import Vuex from 'vuex'；
import App from './app.vue'；Vue.use(VueRouter)；
Vue.use(Vuex)；

vuex配置

const store =new Vuex.Store({//vuex的配置
});

new Vue({el:'#app',
router:router,
//使用vuex
store:store,
render:h=>{return h(App)
}
});

仓库store包含了应用的数据(状态)和操作过程，Vuex里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。

来自store的数据只能读取($store)，不能手动改变，改变store中数据的唯一方法是显示的提交mutations。

提交mutations

const store =new Vuex.Store({state:{cunt:0;
},
mutations:{increment(state){state.count ++;
},
decrease(state){state.count --;
}
}
});

执行mutations

通过this.$store.commit方法来执行mutations。在index.vue中添加按钮用于就加减。

在methods中执行mutations来改变store里的数据。

开局一张图，理解Vuex相关推荐

一张图理解RACSignal的Subscription过程
通过下面一张图理解RACSignal的调用过程: 创建signale RACSignal通过子类[RACDynamicSignal createSignal:]方法获得Signal,并将disSubs ...
一图胜千言，8 张图理解 Java
一图胜千言,8 张图理解 Java 一图胜千言,下面图解均来自Program Creek 网站的Java教程,目前它们拥有最多的票选.如果图解没有阐明问题,那么你可以借助它的标题来一窥究竟. 1.字符 ...
一张图理解AOP关键概念
一张图理解AOP关键概念 Aspect(切面) Joint Point(连接点) Advice(通知) Pointcut(切入点) Weaving(织入) 这里以跟踪方法调用为例,Calculate为 ...
一周极客热文：8张图理解Java
图:equals()方法.hashCode()方法的区别 HashCode被设计用来提高性能.equals()方法与hashCode()方法的区别在于: 如果两个对象相等(equal),那么他们一定有 ...
用一张图理解SVM的脉络
本文及其它机器学习.深度学习算法的全面系统讲解可以阅读<机器学习与应用>,清华大学出版社,雷明著,由SIGAI公众号作者倾力打造,自2019年1月出版以来已重印3次. 书的购买链接书的勘 ...
[转]一张图理解prototype、proto和constructor的三角关系
本文转自:http://www.cnblogs.com/xiaohuochai/p/5721552.html 前面的话 javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰 ...
JS 一张图理解prototype、proto和constructor的关系
转载于原文地址:https://www.cnblogs.com/xiaohuochai/p/5721552.html(感谢大神的总结) 前面的话 javascript里的关系又多又乱.作用域链是一种单 ...
用8张图理解Java
一图胜千言,下面图解均来自Program Creek 网站的Java教程,目前它们拥有最多的票选.如果图解没有阐明问题,那么你可以借助它的标题来一窥究竟. 1.字符串不变性下面这张图展示了这段代码做 ...
一张图理解EOS是什么
从比特币到以太坊,再到 EOS,它们背后的组织渐趋复杂.比特币处在完全自运转的状态.以太坊由以太坊基金会开发软件和运转该区块链网络.出于各种原因,EOS 显得更为复杂.初看,它至少包括以下三个部分. ...
一张图理解内网、外网、动态IP
大家都知道中国是一个IPV4地址严重缺乏的国家,所以我们的拨号宽带一直都是动态IP,没有固定IP,后来更过分的是很多城市出现了内网IP,还有我们所有的二级宽带ISP提供的都是内网IP,内网IP越来越多 ...

开局一张图，理解Vuex

Vuex 的基本用法

提交mutations

执行mutations

开局一张图，理解Vuex相关推荐

最新文章

热门文章