大前端学习--Vuex状态管理

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: ''
      }
    }</