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 ...
随机推荐
- java 字符串内存分配的分析与总结
经常在网上各大版块都能看到对于java字符串运行时内存分配的探讨,形如:String a = "123",String b = new String("123" ...
- Docker搭建MySQL主从集群，基于GTID
写在前边 搭建MySQL读写分离主从集群,这里未使用binlog方式,使用的是GTID方式 源码见我的Github https://github.com/hellxz/mysql-cluster-do ...
- K8s集群部署（三）------ Node节点部署
之前的docker和etcd已经部署好了,现在node节点要部署二个服务:kubelet.kube-proxy. 部署kubelet(Master 节点操作) 1.二进制包准备 [root@k8s-m ...
- [Vue 牛刀小试]：第十五章 - 传统开发模式下的 axios 使用入门
一.前言 在没有接触 React.Angular.Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,能够非常便捷的发起 http 请求 ...
- JAVA String类型的一些小操作
String类型是否包含某个String类型的函数:源字符串.contains(包含字符串) 返回值为:boolean类型(true或false) String类型把某个字符替换成另一个字符:源字符 ...
- input的值为浅淡样式(点击值消失)
<input type="text" id="leftSearchValue" value="" placeholder=" ...
- .NET Core学习笔记（1）——在Linux下运行Console APP
都说.NET Core可以跨平台,说实话Linux咱也不太懂,咱也不敢问.怎样把一个简单的Console App在Linux下跑起来,真是费了我一番功夫.特做此篇以供指北. .NET Core的大饼我 ...
- [常用命令]OSX命令
在mac os下,如何通过命令行来下载网络文件?如果你没有安装或wget命令,那么可以使用curl工具来达到我们的目的. curl命令参数: curl ‘url地址’ curl [选项] ‘url地址 ...
- Impala集成C3P0的连接方式
1. 概述 Impala是Cloudera公司主导开发的新型查询系统,它提供SQL语义,能查询存储在Hadoop的HDFS和HBase中的PB级大数据.已有的Hive系统虽然也提供了SQL语义,但由于 ...
- .net持续集成cake篇之cake任务依赖、自定义配置荐及环境变量读取
系列目录 新建一个构建任务及任务依赖关系设置 上节我们通过新建一个HelloWorld示例讲解了如何编写build.cake以及如何下载build.ps1启动文件以及如何运行.实际项目中,我们使用最多 ...