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 ...
随机推荐
- CI框架使用（一）
CI框架的使用是很简单,也 是mvc模式.其中有好多类直接调用. 在使用帮助函数的时候,都需要手动加载,或者是在配置文件中加一个自动加载 $this->load->helper('ur ...
- Linux 配置 history 命令显示操作时间、用户和登录 IP
一.在配置文件中(/etc/bashrc 或者 /etc/profile 或者~/.bash_profile 或者 ~/.bashrc)添加如下配置 #vim /etc/bashrc // 进到 ...
- python 基本数据类型之字符串功能
字符串常用功能: # name.upper() #全部大写变小写 # name.lower() #全部小写变大写 # name.split() #分割 # name.find() #找到指定子序列的索 ...
- KVM虚拟机迁移至VMware
1.将kvm下虚拟机关机: [root@localhost ~]# virsh list --all Id Name State ----------------------------------- ...
- 渐进式web应用开发---service worker 原理及介绍(一)
渐进式web应用(progressive Web app) 是现代web应用的一种新形式.它利用了最新的web功能,结合了原生移动应用的独特特性与web的优点,为用户带来了新的体验. 一:传统web端 ...
- 并发编程-concurrent指南-原子操作类-AtomicInteger
在java并发编程中,会出现++,--等操作,但是这些不是原子性操作,这在线程安全上面就会出现相应的问题.因此java提供了相应类的原子性操作类. 1.AtomicInteger
- 使用JMH做Benchmark基准测试
目录 BenchMark介绍 开始前的步骤 例子 代码 报告 注解介绍 @BenchmarkMode @OutputTimeUnit @Iteration @WarmUp @State @Fork @ ...
- ZigBee按键中断
何为按键中断? 在了解按键中断之前,我们先来了解一下什么是中断?中断就是程序执行当前代码,当前任务的时候: 突然有自身函数或外部的影响,而使程序执行到别的任务再回来. 举个栗子: 当你在做饭的时候,电 ...
- 哈工大计算机网络Week3-传输层
目录 学习目标 传输层服务概述 传输层服务和协议 传输层 vs. 网络层 Internet传输层协议 多路复用和多路分用 多路复用/分用 分用如何工作? 无连接分用(UDP) 面向连接的分用 面向连接 ...
- SQL Server Form子查询、链接查询
所用数据表:用户,钱包,订单 一.from子查询 --查询钱包里金额大于30000 and User_ID = Users.ID) ) 二.链接查询 内连接(inner join)外连接(left/r ...