1.导入vuex

import Vuex from 'vuex'
Vue.use(Vuex);

2.创建store实例

 let store = new Vuex.Store({
state:{
count:1
},
mutations:{
get_count(state){
state.count++;
}
},
actions:{
//Actions函数接收一个与store实例具有相同方法和属性的context对象
//处理异步操作
get_count(context){
setTimeout(()=>{
context.commit('get_count')
},500)
}
}
});

3.home组件

 <template>
<div>
我是首页
<Son></Son>
<button @click="clickHandler">vuex</button>
</div>
</template> <script>
import Son from "./Son"
export default {
name:"Home",
data(){
return {}
},
components:{
Son
},
methods:{
clickHandler(){
this.$store.dispatch('get_count')
}
} }
</script> <style> </style>

4.son组件

 <template>
<div>
<h2>我是子组件{{ getCount }}</h2>
</div>
</template> <script>
export default {
name:"Son",
data(){
return{}
},
computed:{
getCount(){
return this.$store.state.count
}
}
}
</script> <style> </style>

vuex传值的使用的更多相关文章

  1. vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  2. Vue组件间通信-Vuex

    上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...

  3. vue组件传值之$attrs、$listeners

    当有父组件A,子组件B,孙子组件C的时候 A-B B-C 的传值想必大家应该都非常熟悉了,通过props和$emit和$on来进行传值 那么A-C之间的传值要怎么做呢? 1.event.bus总线传值 ...

  4. [转]vue解决刷新页面vuex数据、params参数消失的问题

    一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误.那么今天经过总结,解决了这个问题.我在最新的项目中,通过了一下几种情况进行传值: 1 ...

  5. uni-app开发经验分享一: 多页面传值的三种解决方法

    开发了一年的uni-app,在这里总结一些uni-app开发中的问题,提供几个解决方法,分享给大家: 问题描述:一个主页面,需要联通一到两个子页面,子页面传值到主页面,主页面更新 问题难点: 首先我们 ...

  6. Vue的七种传值方式

    目录 1,父传子 2,子传父 3,兄弟组件传值 4,父组件使用子组件的数据和方法 5,子组件使用父组件的数据和方法 6,Vuex传值 6.1,定义store 6.2,挂载 6.3,使用 7,路由传值 ...

  7. vuex2.0+两个小例子

    首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解. 废话少说,直接上干货.这是官网上的一 ...

  8. vue和react总结

    一.总结一下Vue和React的区别 相同点:   1.都支持服务器端渲染     2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent ...

  9. vue单页应用和和多页应用的区别

    个人见解如下: 单页面应用(SinglePage Web Application  )简称:SPA 多页面应用 (MultiPage Application) 简称:MPA 组成一个外壳和多个页面片段 ...

随机推荐

  1. k8s Pod 扩容和缩容

    在生产环境下,在面临服务需要扩容的场景时,可以使用Deployment/RC的Scale机制来实现.Kubernetes支持对Pod的手动扩容和自动扩容. 手动扩容缩容 通过执行扩容命令,对某个dep ...

  2. 【Linux开发】【CUDA开发】Ubuntu上安装NVIDIA显卡驱动

    机型为戴尔Vostro3900  显卡型号为GTX 745  对于Nvidia显卡的驱动,如今很多Linux发行版会默认使用名为nouveau的驱动程序.Nouveau是由第三方为Nvidia开发的一 ...

  3. react-redux源码学习

    React-redux 源码学习 version 7.0.3 目录 Provider connect mapStateToProps mapDispatchToProps mergeProps opt ...

  4. 【转帖】编译-O 选项对性能提升作用

    编译-O 选项对性能提升作用 https://www.cnblogs.com/pigerhan/p/3526889.html GCC -O 选项 这个选项控制所有的优化等级.使用优化选项会使编译过程耗 ...

  5. TZOJ5255: C++实验:三角形面积

    #include<iostream> #include<iomanip> #include<math.h> #include<cmath> using ...

  6. 【IDEA使用技巧】(1) —— 快捷键

    1.InteliJ IDEA设置快捷键 1.1. IDEA快捷键修改—代码提示 IDEA中当现有的快捷键被系统中其他软件(比如输入法)占用时,我们可以自定义修改快捷键.比如,IDEA中的代码自动提示快 ...

  7. 【转】基于FPGA的Sobel边缘检测的实现

    前面我们实现了使用PC端上位机串口发送图像数据到VGA显示,通过MATLAB处理的图像数据直接是灰度图像,后面我们在此基础上修改,从而实现,基于FPGA的动态图片的Sobel边缘检测.中值滤波.Can ...

  8. warning: LF will be replaced by CRLF in application.yml. The file will have its origina解决方法

    环境: windows提交时报错如图所示: 原因是存在符号转义问题 windows中的换行符为 CRLF, 而在linux下的换行符为LF,所以在执行add . 时出现提示,解决办法: git con ...

  9. Java泛型 - 返回父类的子类

    一.栗子 public class GenericityInher { //error: Type mismatch: cannot convert from ArrayList<Child&g ...

  10. ZFS文件系统及Freenas介绍

    一.简介 1.什么是zfs文件系统 ZFS文件系统的英文名称为Zettabyte File System,也叫动态文件系统(Dynamic File System),是第一个128位文件系统.最初是由 ...