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 ...
随机推荐
- Android异常与性能优化相关面试问题-ui卡顿面试问题详解
UI卡顿原理: “60fps(Frames Per Second每秒传输帧数) ----> 16ms” 针对上面标红的数字,下面具体说明一下:最主要的根源在于渲染性,Android会每隔16ms ...
- Alpha个人项目测试
这个作业属于哪个课程 [课程链接][ ] 这个作业要求在哪里 [作业要求][ ] 团队名称 [山海皆可平][ ] 作业目标 对其他小组进行测试 测试报告 姓名 唐友鑫 学号 201631062121 ...
- five rendering ideas 里获取csm的 shadow边界做 pcf
http://advances.realtimerendering.com/s2011/White,%20BarreBrisebois-%20Rendering%20in%20BF3%20(Siggr ...
- vue插件——滚动监听 vue-scrollwatch
造轮子的目的: 做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够 ...
- Vue数据通信详解
如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着 ...
- 银行卡号Luhn校验算法
/** *银行卡号Luhn校验算法 *luhn校验规则:16位银行卡号(19位通用): *1.将未带校验位的 15(或18)位卡号从右依次编号 1 到 15(18),位于奇数位号上的数字乘以 2. * ...
- vue项目和django项目交互补充，drf介绍，restful规范
目录 一.vue项目与django项目的交互 二.drf(Django-restframework) 1. drf主要知识点 2. drf框架安装 3. web接口(WEB API) 4. restf ...
- SQL Prompt 5 功能按键说明
1. Refresh suggestions 未知,按了没反映 2.Format sql 标准化SQL代码书 ...
- HDU - 5245 概率
JoyfulHDU - 5245 题目大意:有N*M个正方形,进行k次涂色,每次会随机的选两个正方形作为一个矩形区域的顶点,然后把这个区域内的涂色,最后问k次之后,预计被涂了色的正方形有几个(也就是数 ...
- Jmeter（九）参数化
参数化是自动化测试脚本的一种常用技巧.简单来说,参数化的一般用法就是将脚本中的某些输入使用参数来代替,在脚本运行时指定参数的取值范围和规则: 这样,脚本在运行时就可以根据需要选取不同的参数值作为输入. ...