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 ...
随机推荐
- HDU - 6223 Infinite Fraction Path (倍增+后缀数组)
题意:给定一个长度为n(n<=150000)的字符串,每个下标i与(i*i+1)%n连边,求从任意下标出发走n步能走出的字典序最大的字符串. 把下标看成结点,由于每个结点有唯一的后继,因此形成的 ...
- 8张图，让你彻底理解三极管的开关功能 && 經典線路圖
三极管除了可以当作交流信号放大器之外,也可以作为开关之用.严格说起来,三极管与一般的机械接点式开关在动作上并不完全相同,但是它却具有一些机械式开关所没有的特点. 为了很好的理解三极管的开关功能,下面以 ...
- js高阶函数汇总
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,函数按照原始数组元素顺序依次处理元素. 注意: map() 不会对空数组进行检测. 注意: map() 不会改变原始数组. ...
- union共同体
定义: union 共用体名{ 成员列表}: 与结构体不同的是,共用体的所有成员占用同一段内存,修改一个成员会影响其余成员.但是结构体的各个成员会占不同的内存. 结构体占用的内存大于等于所有成员占用的 ...
- es6的Set结构
今天看了一下es6的文档,发现还是比较实用的,Set结构可以用来数组的去重哎 let arr = [1,3,6,3,1,9] let arr1 = new Set(arr) [...arr1]的值就是 ...
- jquery clearQueue方法 语法
jquery clearQueue方法 语法 作用:clearQueue() 方法停止队列中所有仍未执行的函数.与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队 ...
- React-native 触摸事件
http://www.360doc.com/content/16/0711/23/34978982_574835465.shtml
- TTTTTTTTTTTTTT CF 95 B 构造4，7幸运数字 贪心 构造 string
B. Lucky Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- java中jsp的EL的定义以及使用
1.定义: EL(Expression Language) 是为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP 中简化表达式的方 ...
- delphi请求http接口中文乱码问题
请求http接口的时候参数值是中文乱码: http接口一般都是由java,php以及C#开发而成的,乱码的原因也是由于编码的问题,一般传递数据的都是utf8,然后传递的时候都会urlEcode 那么d ...