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 ...
随机推荐
- [Android] 基于 Linux 命令行构建 Android 应用(一):关于 Android 项目
关于 Android 项目 项目是保存源代码和资源文件的容器. 谷歌提供的 Android SDK 工具只能对具有固定目录结构的项目进行编译和打包.因此强烈建议使用 Eclipse + ADT 或者 ...
- NIO相关概念之Channel
通道(Channel)是java.nio的第二个主要创新.它们既不是一个扩展也不是一项增强,而是全新.极好的Java I/O示例,提供与I/O服务的直接连接.Channel用于在字节缓冲区和位于通道另 ...
- PHP 设置分页 可以直接引用 最下面有自己引用的方法和注释
1 <?php 2 /** 3 file: page.class.php 4 完美分页类 Page 5 */ 6 class Page { 7 private $total; //数据表中总记录 ...
- hdu 3016 Man Down
题意:给你n个板子,初始100生命,到达每个板子加血或者扣血,求从最上面的板子落到地面的最优解 题解:对于每一个木板,只有从左下或者从右下,所以从下往上来看,到达第n个木板的最优解为 dp[n] = ...
- 阿里云不同账号之间相同地域的VPC网络互访
今天实际操作了一下,在这篇随笔中记录一下以备忘,主要参考阿里云帮助文档-不同账号下专有网络内网互通. 实现场景:账号A的VPC网络中的ECS访问账号B的VPC网络中的ECS与RDS(地域都在华东1), ...
- [No0000F8]override和new的区别
override 1. override是派生类用来重写(或覆盖)基类中方法的: 2. override不能重写非虚方法和静态方法: 3. override只能重写用virtual.abstract. ...
- arcgis10.4 server第一次发布地图报错:We were unable to connect to...Error:Proxy server got bad address...
arcgis 10.4发布地图跟10.2不一样.server url里的http要改为https,否则就会连接不上.
- winform excel导入--自带office.interop.excel方式
用npoi方式,遇到一个问题,有的excel用加密软件(盖章,只读等)生成的解析不了,所以换成自带的方式,可以解决. 需要引用系统自带Microsoft.office.interop.excel pu ...
- object cloning
php.net <?php class SubObject { static $instances = 0; public $instance; public function __constr ...
- Mysql 性能优化教程
Mysql 性能优化教程 目录 目录 1 背景及目标 2 Mysql 执行优化 2 认识数据索引 2 为什么使用数据索引能提高效率 2 如何理解数据索引的结构 2 优化实战范例 3 认识影响结果集 4 ...