Vuex状态管理
文章内容输出来源:大前端高薪训练营
一、组件内的状态管理流程
1. 状态管理
-
state:驱动应用的数据源
-
view:以声明方式将state映射到视图
-
actions:相应在view上的用户输入导致的状态变化
二、组件间通信方式
1. 父组件给子组件传值
-
子组件通过props接受数据
<template> <div> <h2>{ {title}}</h2> </div> </template> <script> export default { // props: ['title'], props: { title: String } } </script>
-
父组件中给子组件通过响应属性传值
<template> <div> <child title="My journey with Vue"></child> </div> </template> <script> import child from './01-Child' export default { components: { child } } </script>
2. 子组件给父组件传值
-
通过自定义事件子组件给父组件传值
<template> <div> <h1 :style="{ fontSize: fontSize + 'em' }">Props Down Child</h1> <button @click="handler">文字增大</button> </div> </template> <script> export default { props: { fontSize: Number }, methods: { handler () { this.$emit('enlargeText', 01) } } } </script>
-
父组件中注册子组件内部触发的事件
<template> <div> <h1 :style="{ fontSize: hFontSize + 'em' }">Event Up Parent</h1> 这里的文字不需要变化 <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child> <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child> <child :fontSize="hFontSize" v-on:enlargeText="hFontSize + $event"></child> </div> </template> <script> import child from './02-child' export default { components: { child }, data () { return { hFontSize: 1 } }, methods: { enlargeText (size) { this.hFontSize += size } } } </script>
3. 不相关组件之间传值
-
通过事件中心eventbus触发和注册事件
import Vue from 'vue' export default new Vue()
-
触发eventbus中的事件
<template> <div> <h1>Event Bus sibling01</h1> <div class="number" @click="sub">-</div> <input type="text" style="width: 30px; text-align: center": value="value"> <div class="number" @click="add">+</div> </div> </template> <script> import bus from './eventbus' export default { props: { num: Number }, created () { this.value = this.num }, data () { return { value: -1 } }, methods: { sub () { if (this.value > 1) { this.value-- bus.$emit('numchange', this.value) } }, add () { this.value++ bus.$emit('numchange', this.value) } } } </script>
-
注册事件
<template> <div> <h1>Event Bus sibling02</h1> <div>{ { msg }}</div> </div> </template> <script> import bus from './eventbus' export default { data () { return { msg: '' } }</