vuex 子组件传值
以下是基础的使用方法,详细且深入使用方法详细见博客:https://segmentfault.com/a/1190000015782272
Vuex官网地址:https://vuex.vuejs.org/zh/guide/
步骤一:安装vuex
npm install vuex --save
步骤二:简单使用
- 构建核心仓库store.js
Vuex 应用的状态 state都应当存放在store.js 里面,Vue 组件可以从 store.js 里面获取状态,可以把 store 通俗的理解为一个全局变量的仓库。
但是和单纯的全局变量又有一些区别,主要体现在当 store 中的状态发生改变时,相应的 vue 组件也会得到高效更新
src 目录下创建一个 vuex 目录,vuex下创建 store.js
- store.js中
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex); export default new vuex.Store({
// 首先声明一个状态 state
state:{
word:''
},// 更新状态
mutations:{
changeWord(state, _word) {
state.word = _word;
}
},
})
- main.js中
import store from './vuex/store'
- 传递
传递方法:
A界面改变store中state里的参数: this.$store.commit( 'setId' ,(要传递的参数id) )
B界面接收变化数据参数: this.$store.state.id
但是通过 vuex这样写,页面刷新之后,数据也会消失。它只是对变量提升。
A页面改变store中state的参数:
methods:{
sureChange () {
this.$store.commit( 'changeWord' ,this.changeWord.trim()); this.$router.push('/hbchange/2?id=2');
}
},
<button @click="changeword">按钮</button>
B页面
sureEdit () {
console.log(this.$store.state.word )
}
vuex 子组件传值的更多相关文章
- Vue-组件嵌套之——父组件向子组件传值
父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件. 一.首先,值肯定是定义在父组件中的,供所有子组件共享.所以要在父组件的 ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue-父子组件传值
在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递.一.父组件向子组件传值 使用 Prop 传递数据,父组件的数据需要通过 prop 才能下发到子组件中,子组件要显式地用 pr ...
- 使用React.cloneElement()给子组件传值
React提供了一个克隆组件的API: React.cloneElement( element, [props], [...child] ) 可以利用该方法,给子组件传值,使用如下: class Pa ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- angular4父组件向子组件传值,子组件向父组件传值的方法
父组件向子组件传值 @Input 文件目录 父组件: father.template.html <h1>父组件</h1> <cmt-child [data]='dat ...
随机推荐
- iOS - 极光推送证书的创建及过期处理
无论iPhone还是安卓,我们用到的所有应用基本都有推送通知服务,因为这是应用很好的推广方式,有新产品了.有新更新了通知下用户及时查看.但Apple有点特殊,它的推送需要发到苹果服务器上中转一下,这就 ...
- thinkphp 点击某个class提交post值,返回回来用一个弹窗插件,提示返回来要说的话
下一篇文章有讲到弹窗插件的怎么使用,自写教程 如果能帮到你,给点个赞鼓励一下 <============= 控制器 =================> public function ...
- DB2 rollforward 命令使用详解
DB2 rollforward 命令使用详解 原文:https://www.ibm.com/developerworks/cn/data/library/techarticles/dm-1003wuc ...
- 手动安装vue-devtools
第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools git clone https://github.com/vuejs/vue-devtool ...
- mysql的多表查询join
http://blog.csdn.net/jintao_ma/article/details/51260458 https://zhidao.baidu.com/question/1304158100 ...
- hadoop历史版本,包括大名鼎鼎的hadoop 0.20.2
http://archive.apache.org/dist/hadoop/core/ 大名鼎鼎的hadoop 0.20.2在此: http://archive.apache.org/dist/had ...
- 深度学习模型融合stacking
当你的深度学习模型变得很多时,选一个确定的模型也是一个头痛的问题.或者你可以把他们都用起来,就进行模型融合.我主要使用stacking和blend方法.先把代码贴出来,大家可以看一下. import ...
- CentOS7初始化mysql库报错
在centos7上安装mysql数据库,进行数据库初始化工作时,报错缺少data::dumper库文件,如下: 解决办法:安装autoconf库后重新初始化即可解决. yum-y install au ...
- Java中抽象类和抽象方法的区别
抽象方法:在类中没有方法体的方法,就是抽象方法. 抽象类:含有抽象方法的类就叫抽象类. 抽象类中的抽象方法必须被实现! 如果一个子类没有实现父类中的抽象方法,则子类也成为了一个抽象类! 抽象类中的普通 ...
- Flink - allowedLateness
WindowOperator processElement final Collection<W> elementWindows = windowAssigner.assignWindow ...