vue 状态管理vuex(九)
通过props 及 $emit在父子组件通讯,对应频繁更新状态考虑使用vuex
store.js
export default {
// 存储状态值
state: {
count: 0
},
// 状态值的改变方法,操作状态值
// 提交mutations是更改Vuex状态的唯一方法
mutations: {
// 修改state,第一个参数就是state
increment(state) {
state.count++
}
}
}
....
父组件.vue
<template>
<div>
<child :message="changeMsg" @chageMsg="prent"></child>
<input type="button" value="父传子" @click="changeMsga"> <p>父组件文字:{{fromchildMsg1}}</p> <p>count:{{ $store.state.count }}</p>
<input type="button" value="父组件按钮Count++" @click="parentEvent">
</div> </template>
<script>
import child from '@/components/Home2'
export default {
data: function () {
return {
changeMsg: '1111111',
childMsg: '',
fromchildMsg1: ''
}
},
methods: {
parentEvent: function () {
this.$store.commit('increment');
},
changeMsga: function () {
this.changeMsg = '公司'
},
prent: function (msg) {
this.fromchildMsg1 = msg;
}
},
components: {
child
}
} </script>
<style scoped> </style>
子组件.vue
<template>
<div>
获取值:<span>{{message}}</span><br>
<input type="button" value="子组件" @click="submitValue">
<p>count:{{ $store.state.count }}</p>
<input type="button" value="子组件按钮Count++" @click="childEvent">
</div>
</template>
<script>
export default {
data: function () {
return { }
},
props:['message'],
methods: {
childEvent: function(){
this.$store.commit('increment')
},
submitValue: function(){
this.$emit("chageMsg",'222222222222222');
}
}
} </script>
<style scoped> </style>
初始化会看到,比较low的页面
父子组件传值,箭头
父子组件状态更改 ,点击 (父子组件按钮)会,发现 父子组件数组都在+1.
针对刷新,状态信息无,可以使用本地缓存localstorage
vue 状态管理vuex(九)的更多相关文章
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- Vue学习日记(四)——Vue状态管理vuex
前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
- vue状态管理vuex从浅入深详细讲解
1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...
- Vue状态管理Vuex简单使用
状态管理保存在store\index.js中,简单说明如下 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export def ...
- Vue 状态管理 Vuex
1.概述 Vuex作为插件,管理和维护整个项目的组件状态. 2.安装vuex cnpm i --save vuex 3.vuex使用 github地址:https://github.com/MengF ...
- Vue之状态管理(vuex)与接口调用
Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...
- vue - 状态管理器 Vuex
状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.
- vuex(vue状态管理)
vuex(vue状态管理) 1.先安装vuex npm install vuex --save 2.在项目的src目录下创建store目录,并且新建index.js文件,然后创建vuex实例,引入 ...
- VueX(vue状态管理)简单小实例
VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...
随机推荐
- poj3557 Map Generator
传送门 题目大意 给定两个数n,p;表示n个点中任意两点连边的概率为p,求生成的图是个连通块的概率 分析 我们发现直接求产生联通块的概率并不容易,于是我们转而考虑计算不能生成联通块的概率,公式如下: ...
- Luogu 3627 [APIO2009]抢掠计划
不爽. 为什么tarjan能爆栈啊 十分显然的缩点,给缩点之后的点连上权值为后一个点集权值的有向边,然后spfa跑最长路. 注意一开始$dis_{st}$应该等于$st$这个集合的权值. 时间复杂度$ ...
- SDKD 2017 Summer Single Training #03
今天的题目有 6 个. 第一题: CodeForces - 400D Dima and Bacteria 这个题实际是不难的,难的可能在题意的理解上还有题干有点长,这个题很考察题意上面,知识点很熟悉 ...
- bit byte的关系
字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte) 1字节=8位(1 byte = 8bit) 一个字的字长为2个字节=2*8=16 一个字节 ...
- FileSaver.js导出json文件和文本
最近刚刚写了个json数据导出生成Excel文件的,顺便总结下利用FileSaver.js导出其他文件的,这里要注意的一个点就是,当导出的是json文件或是txt文件时,导出的内容要是字符串,特别当时 ...
- DjVu转PDF
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2009.09.22更新:2012.06.11针对PdfToy的新进展,更新了相关内容. 1 引言2 理论3 实现 3. ...
- unity3d c# http 请求json数据解析
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Net ...
- ASP.NET MVC底层原理与框架
前言 鄙人有一毛病,喜欢钻研原理性的东西,感觉只知道怎么用还不太够,更想知道如何实现的以及为什么会这样. 暑假的时候做积分系统是第一次接触MVC,感觉MVC就是一个框架,分为Module ,view和 ...
- ubuntu - 安装sqoop
解析过程 参考:https://www.cnblogs.com/qingyunzong/p/8807252.html#_label4 一.下载 二.解压到指定目录 三.配置sqoop环境变量并生效 四 ...
- 网络模拟工具Clumsy
Clumsy 是一款小巧而功能强大的开源弱网模拟工具,它能在windows平台下人工造成不稳定的网络状况,方便你调试应用程序在极端网络状况下的表现. 你可以选择 clumsy 提供的功能来有目的性的调 ...