以下是基础的使用方法,详细且深入使用方法详细见博客: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 子组件传值的更多相关文章

  1. Vue-组件嵌套之——父组件向子组件传值

    父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件. 一.首先,值肯定是定义在父组件中的,供所有子组件共享.所以要在父组件的 ...

  2. vue 父组件给子组件传值,子组件给父组件传值

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...

  3. Vue 组件&组件之间的通信 之 父组件向子组件传值

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...

  4. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  5. Vue-父子组件传值

    在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递.一.父组件向子组件传值 使用 Prop 传递数据,父组件的数据需要通过 prop 才能下发到子组件中,子组件要显式地用 pr ...

  6. 使用React.cloneElement()给子组件传值

    React提供了一个克隆组件的API: React.cloneElement( element, [props], [...child] ) 可以利用该方法,给子组件传值,使用如下: class Pa ...

  7. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

  8. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. angular4父组件向子组件传值,子组件向父组件传值的方法

    父组件向子组件传值   @Input 文件目录 父组件: father.template.html <h1>父组件</h1> <cmt-child [data]='dat ...

随机推荐

  1. iOS - 极光推送证书的创建及过期处理

    无论iPhone还是安卓,我们用到的所有应用基本都有推送通知服务,因为这是应用很好的推广方式,有新产品了.有新更新了通知下用户及时查看.但Apple有点特殊,它的推送需要发到苹果服务器上中转一下,这就 ...

  2. thinkphp 点击某个class提交post值,返回回来用一个弹窗插件,提示返回来要说的话

    下一篇文章有讲到弹窗插件的怎么使用,自写教程 如果能帮到你,给点个赞鼓励一下 <=============  控制器  =================> public function ...

  3. DB2 rollforward 命令使用详解

    DB2 rollforward 命令使用详解 原文:https://www.ibm.com/developerworks/cn/data/library/techarticles/dm-1003wuc ...

  4. 手动安装vue-devtools

    第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools git clone https://github.com/vuejs/vue-devtool ...

  5. mysql的多表查询join

    http://blog.csdn.net/jintao_ma/article/details/51260458 https://zhidao.baidu.com/question/1304158100 ...

  6. hadoop历史版本,包括大名鼎鼎的hadoop 0.20.2

    http://archive.apache.org/dist/hadoop/core/ 大名鼎鼎的hadoop 0.20.2在此: http://archive.apache.org/dist/had ...

  7. 深度学习模型融合stacking

    当你的深度学习模型变得很多时,选一个确定的模型也是一个头痛的问题.或者你可以把他们都用起来,就进行模型融合.我主要使用stacking和blend方法.先把代码贴出来,大家可以看一下. import ...

  8. CentOS7初始化mysql库报错

    在centos7上安装mysql数据库,进行数据库初始化工作时,报错缺少data::dumper库文件,如下: 解决办法:安装autoconf库后重新初始化即可解决. yum-y install au ...

  9. Java中抽象类和抽象方法的区别

    抽象方法:在类中没有方法体的方法,就是抽象方法. 抽象类:含有抽象方法的类就叫抽象类. 抽象类中的抽象方法必须被实现! 如果一个子类没有实现父类中的抽象方法,则子类也成为了一个抽象类! 抽象类中的普通 ...

  10. Flink - allowedLateness

    WindowOperator processElement final Collection<W> elementWindows = windowAssigner.assignWindow ...