vuex 使用
一、什么是Vuex
Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化
二. 为什么要使用Vuex?
App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现, A组件想要和B组件通讯往往是这样的:
A组件说: "报告App老大, 能否帮我托个信给B组件" => dispatch一个事件给App
App组件说: "包在我身上, 它需要监听A组件的dispatch的时间, 同时需要broadcast一个事件给B组件"
B组件说: "信息已收到", 它需要on监听App组件分发的事件
三、实现
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vuex</title>
</head> <script src="./vuex.js"></script>
<script src="./vue.js"></script> <body>
<div id="app">
<say></say>
<counter></counter>
</div>
</body>
<script>
Vue.use(Vuex); //在创建Vue实例之前 // 注册一个全局组件
Vue.component('say', {
template: `<div>{{name}} {{age}} {{num}} <br/>
<p style='color:yellow' @click='changeNum'>点我</p>
<p style='color:pink' @click='changeNumAnsyc'>点我1</p>
</div>`,
data: function () {
return { }
},
computed: {
name: function () {
return this.$store.state.name
},
age: function () {
return this.$store.getters.getAge
},
num: function () {
return this.$store.state.num;
}
},
mounted: function () {
console.log(this)
},
methods: {
changeNum: function () {
//在组件里提交
this.$store.commit('change', 10)
},
changeNumAnsyc: function () {
this.$store.dispatch('add', 5);
}
}
})
// 局部组件
const Counter = {
template: `<div style="color:red;">{{ count }}</div>`,
computed: {
count() {
return this.$store.state.num
}
}
} var myStore = new Vuex.Store({
state: {
//存放组件之间共享的数据
name: "vuex",
age: 20,
num: 1
},
mutations: {
//显式的更改state里的数据 只能处理同步函数
change: function (state, a) {
// state.num++;
state.num += a;
console.log(state.num += a);
},
changeAsync: function (state, a) {
state.num += a;
console.log(state.num += a);
}
},
getters: {
//获取数据的方法
getAge: function (state) {
return state.age;
}
},
actions: {
// 可以处理异步函数
add: function (context, value) {
setTimeout(function () {
//提交事件
console.log("stop");
context.commit('changeAsync', value);
}, 1000) }
}
}); new Vue({
el: "#app",
data: {
name: "小明"
},
components: {
Counter
},
store: myStore,
mounted: function () {
console.log(this) //
},
})
</script> </html> </html>
vuex 使用的更多相关文章
- 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- vuex复习方案
这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- vuex（1.0版本写法）
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...
- 关于Vue vuex vux 文档
01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex ----->>状态管理模块儿<<------- https://vuex.vue ...
- vuex
英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue2.X的状态管理vuex记录
记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method -- ...
- 在vue1.0遇到vuex和v-model的坑
事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...
- vuex 笔记
Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...
随机推荐
- idea 下gradle创建springboot 项目
InterlijIdea 开发环境下创建基于springBoot的项目. 环境 1.jdk1.5以上 2.interlijidea 15 以上 步骤 1.File –>new –>Proj ...
- CSS基础学习-5.CSS属性_字体文本文本装饰
- Jenkins配置邮件信息
1.进入Manage Jenkins----系统配置 2.设置Jenkins地址和管理员邮箱(不设置管理员邮箱无法发送邮件) 3.配置系统管理员的邮件属性 4.点击[高级]配置系统管理员的邮件属性 5 ...
- SSM项目无法解析JSP页面
JSP页面显示标头<%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- MariaDB基本命令
--查看当前日期select current_date();--查看当前时间select current_time();--查看当前日期.时间select now();--查看当前用户select u ...
- python中ord()函数,chr()函数,unichr()函数
ord()函数,chr()函数,unichr()函数 chr()函数用一个范围在range(256)内的(就是0-255)整数作参数,返回一个对应的字符.unichr()跟它一样,只不过返回的是Uni ...
- Java-判断是否为回文数
/** * @ClassName: IsPalindrome * @author: bilaisheng * @date: 2017年9月19日 下午2:54:08 * 判断是否为回文数 * true ...
- 2017"百度之星"程序设计大赛 - 初赛（A） [ hdu 6108 小C的倍数问题 ] [ hdu 6109 数据分割 ] [ hdu 6110 路径交 ] [ hdu 6112 今夕何夕 ] [ hdu 6113 度度熊的01世界 ]
这套题体验极差. PROBLEM 1001 - 小C的倍数问题 题 OvO http://acm.hdu.edu.cn/showproblem.php?pid=6108 (2017"百度之星 ...
- ZOJ - 3715贪心
ZOJ - 3715KindergartenElection 题目大意:幼儿园里正在举办班长选举,除1号小朋友外每个人都会投他最好的朋友,但1号小朋友可以贿赂别人(小伙子有丶想法),被贿赂的小朋友就会 ...
- 玩转git和github
1.概念 git---工具,版本控制 github----网站,社交平台,开源项目,远程仓库 2.下载 msysgit是Windows版的Git,从http://msysgit.github.io/下 ...