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 ...
随机推荐
- python基础编程:生成器、迭代器、time模块、序列化模块、反序列化模块、日志模块
目录: 生成器 迭代器 模块 time 序列化 反序列化 日志 一.生成器 列表生成式: a = [1,2,3,3,4,5,6,7,8,9,10] a = [i+1 for i in a ] prin ...
- 解决Zabbix某台主机突然频繁告警"Zabbix agent on xxxxxx is unreachable for x minutes"
一.某台主机突然某一天频繁告警zabbix agent不可达 查看zabbix agent日志没有发现异常 二.查看zabbix server日志发现这台主机的日志有大量报错信息"first ...
- HDU 6045 - Is Derek lying | 2017 Multi-University Training Contest 2
/* HDU 6045 - Is Derek lying [ 分析 ] 题意: 有N个问题, 每个问题有A,B,C三种答案,答对加一分,答错不加分 给出甲乙两人的答案,给出两人的分数先x, y,问分数 ...
- Django后台获取不到前端axios-post请求提交的参数的解决方法
解决方法 用 URLSearchParams 传递参数 let param = new URLSearchParams() param.append('username', 'admin') para ...
- win10本机安装rabbitMQ
在win10环境下安装RabbitMQ的步骤 第一步:下载并安装erlang 原因:RabbitMQ服务端代码是使用并发式语言Erlang编写的,安装Rabbit MQ的前提是安装Erlang. 下载 ...
- hihocoder 1251 Today is a rainy day ( 15年北京 C、暴力 )
题目链接 题意 : 一串数字变成另一串数字,可以单个数字转变,或者一类数字转变,问最少操作次数 分析 : 15年北京赛区的银牌题 首先有一个点需要想明白.或者猜得到 即最优的做法肯定是先做完 2 操作 ...
- 51 Nod 1352 集合计数
大致题意:求ax+by=n+1的正数解的个数. 先看下面: 相信看过了通解的参数表示后已经知道怎么解了,贴代码: #include <bits/stdc++.h> #define ll l ...
- 51 Nod 1629 B君的圆锥
1629 B君的圆锥 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 B君要用一个表面积为S的圆锥将白山云包起来. B君希望包住的白山云体积尽量大 ...
- linux文本处理三剑客之 grep
文本处理无非是对文本内容做查看.修改等操作.Linux三剑客: grep.sed 和 awk 命令. 处理文本内容,用 Vim 编辑器不是很好吗?Vim 允许我们使用键盘.鼠标来对文本内容进行交互性地 ...
- C#如何生成setup安装文件
当前项目状况如图: ,如何把test1打包成setup文件,用户安装后即可完成相应功能. 第一,右击“解决方案test1”->添加“新建项目”->“其他项目类型”->“安装和部署”- ...