Vue组件间通信-Vuex
上回说到Vue组件间通讯，最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法，这节来说说Vuex(store仓库)。
首先Vuex需要安装，安装的方式有很多，在这里就不一一细说了。我是通过npm方式安装的：
npm install vuex --save
安装好之后需要再main.js里全局引入：
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex)
new Vue({
el:'#app',
store,
components: { App },
template: '<App/>'
})
这样就完成了Vuex的安装。接下来就是Vuex的用法了：
Vuex有五个属性：State、Getter、Mutation、Action、Module。
1. State里放入的是仓库的数据，类似于js里的data：
import Vue from 'vue'
const modules = {
state:{
name: '小白'
}
namespaced: true
}
export default modules
把Vuex放入src下的store文件里，建一个新的组件modules，然后把他抛出来，被引入所需数据的组件：
<script>
import { mapState }from 'vuex'
export default {
computed:{
// name(){
// return this.$store.state.name
// }
...mapState(['name'])
},
mounted(){
console.log(this.name)
}
}
</script>
Vuex里的数据需要从计算属性(computed)里获取，我写了两种我常用的方法，都可以接收到数据，在mounted钩子里打印出的数据：
2. Getters里放入State里数据的扩展数据，可以把它当作计算属性。比如State里有一个数组，就可以从Getters里获取到数组的长度，或是取到对象里面的属性，用法和计算属性类似：
import Vue from ‘vue’
const modules = {
state:{
list:[
{id :1,content: '第一条'},
{id :2,content: '第二条'}
]
}，
getter:{
listLength: (state)=>{return state.list.length}
},
namespaced: true
}
export default modules;
我在state里存了一个数组，然后getters计算出state里数组的长度，接下来就是在组件里接收了：
<script>
import { mapGetters } from 'Vuex'
export default {
compoted:{
...mapGetters(['listLength'])
},
mounted(){
console.log(this.listLegth)
}
}
</script>
打开控制台打印出2，就是list数组的长度。
除此之外，getters里可以转化数据类型，如果接口里数据的数据类型不是我们想要的类型，那就把它放进getters里进行一下转换，然后再拿到组件里用，例如：
import Vue from 'vue'
const modules = {
state:{
name: '小黑'
}，
getters:{
showName(state) =>{
return name==='小白'?true:false
}
},
namespaced: true
}
export default modules;
此时name里存放的是一组字符串，在getters里把字符串转换为布尔类型，这个类型转换有什么用呢？往下看：
<html>
<div v-if="showName">
{{ name }}
</div>
</html> <script>
import { mapState, mapGetters } from 'vuex'
export default{
computed:{
...mapState(['name']),
...mapGetters(['showName'])
}
}
</script>
可以通过这个布尔型的数据判断name是否显示，向上面这种就不会显示，手动将name的值改为'小白'，name才会显示出来。
3. Mutations里是保存在仓库的方法，这里面的方法只能用来改变state里面的数据，而且想要改变state里的数据只能用mutations里的方法，并且它里面的方法只能是同步的：
import Vue from 'vue'
const modules = {
state:{
name: '小黑'
},
mutations:{
changeName(state){
state.name = '小白'
}
},
namespaced: true
}
export default modules;
还是那个例子，下面是组件调用方法：
<html>
<div>
{{ name }}
<el-button @click="changeName">改变名字</el-button>
</div>
</html> <script>
import { mapState,mapMutations } from 'vuex'
export default {
compoted:{
...mapState(['name'])
},
methods:{
...mapMutations(['changeName'])
}
}
</script>
页面渲染后为：
点击按钮之后为：
组件里的按钮通过调用Vuex里的mutation方法将Vuex里的state数据改变，只不过mutations方法只能同步的，涉及到接口的就不能在它里面写，怎么办的？往下看：
4. Actions和mutations一样都是存放Vuex里的方法，只不过他们有两个最大的不同：
(1) Actions里可以存放异步方法，而Mutations只能放同步的；
(2) Actions里的方法不可以更改state里的数据，state里的数据只能在Mutations里更改。
Actions存放的是什么方法？简单的说，它可以存放Promise方法，也可以存放async方法，也可以在里面加定时器，通过不同的状态执行不同的方法，执行方法可以是Actions里的方法，也可以是Mutations里的方法。
Actions我就不举例子了，因为大部分都用于axios请求接口，简单跟大家说说这个东西怎么使用：
import Vue from 'vue'
import request from '@/api/axios' const modules = {
state:{
list:[]
},
actions:{
getList({ commit }){
// 调用接口方法
request.getList()
.then((response)=>{
// commit用来分配mutations方法
commit('getList',response)
})
}
}，
mutations：{
getList(state,response){
state.list = response.data
}
}
}
简单利用actions异步方法分配给mutations方法，然后在mutations方法里给state里的数据赋值，取到接口数据。
commit用于分配mutations方法，dispatch用于分配actions方法，都需要传参进去。
组件调用其实和调用mutations方法类似：
<script>
import { mapState,mapActions } from 'vuex'
export default {
computed:{
...mapState(['list'])
},
mounted(){
this.getList()
},
methods:{
...mapActions(['getList'])
}
}
</script>
这样就基本完成了vuex传值。
5. module可以把vuex分为不同的模块，使业务逻辑变得更清晰，更准确。在上面的代码里，有const modules，给它不同的名字就是分为不同的模块。不同的module可以存入不同的数据和方法，使用起来非常方便。
Vue组件间通信-Vuex的更多相关文章
- vue组件间通信六种方式（完整版）
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- vue组件间通信
组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...
- vue组件间通信子与父
二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...
- Vue组件间通信：一个例子学会Vue组件-Vue.js学习总结）（转载）
详情请点击 http://www.jianshu.com/p/9ad1ba89a04b
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- vue-learning：31 - component - 组件间通信的6种方法
vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...
- VUE组件如何通信
Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
随机推荐
- bower工具
1.安装bower npm install bower -g 2.安装软件 borwer install jquery 3.安装指定版本 borwer install jquery#1.7 4.卸载软 ...
- 什么是 VxLAN？
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. VLAN 和 ...
- python数据库-数据库的介绍及安装(47)
一.数据库的介绍 数据库(Database)是存储与管理数据的软件系统,就像一个存入数据的物流仓库.每个数据库都有一个或多个不同的API接口用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数 ...
- 统计学习方法9—EM算法
EM算法是一种迭代算法,是一种用于计算包含隐变量概率模型的最大似然估计方法,或极大后验概率.EM即expectation maximization,期望最大化算法. 1. 极大似然估计 在概率 ...
- HDU 2121：Ice_cream’s world II（不定根的最小树形图）
题目链接 题意 求有向图的最小生成树,且根不定. 思路 最小树形图即求有向图的最小生成树,用的是朱刘算法. 这里不定根,那么可以建立一个虚根,让虚根和所有点相连,权值为一个很大的数(这里直接设为所有边 ...
- （转）User-Agent的由来（原来这么有意思）
你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样?Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ( ...
- Java面试题 equals()与"=="的区别？
面试官:请问 equals() 和 "==" 有什么区别? 应聘者: equals()方法用来比较的是两个对象的内容是否相等,由于所有的类都是继承自java.lang.Object ...
- kuangbin专题 专题一 简单搜索 非常可乐 HDU - 1495
题目链接:https://vjudge.net/problem/HDU-1495 题意:有两个空杯(分别是N升和M升)和一罐满的可乐S升,S = N + M,三个容器可以互相倾倒,如果A倒入B,只有两 ...
- Java虚拟机详解（三）------垃圾回收
如果对C++这门语言熟悉的人,再来看Java,就会发现这两者对垃圾(内存)回收的策略有很大的不同. C++:垃圾回收很重要,我们必须要自己来回收!!! Java:垃圾回收很重要,我们必须交给系统来帮我 ...
- bzoj3125: CITY 题解
3125: CITY Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 486 Solved: 213[Submit][Status][Discuss] ...