Article content output source: big front-end high salary boot camp

A state management process within the component

Each component has its own components, such as state, view, and behavior.

new Vue({
  // state
  data () {
    return {
      count: 0}},// view
  template: `<div>{{ count }}</div>`.// actions
  methods: {
    increment () {
      this.count++
    }
  }
})
Copy the code

State management consists of the following parts:

  • State, the data source that drives the application
  • View, which maps state to the view declaratively
  • Actions, which responds to state changes caused by user input on the view

2. Communication mode between components

1. The parent component passes values to the child component

  • The child component receives data via props
<template>
  <div>
    <h2>{{title}}</h2>
  </div>
</template>

<script>
export default {
  // Props have two types: array, object, and object
  // props: ['title'],
  props: {
    title: String}}</script>
Copy the code
  • The parent component passes values to the child component through the corresponding property
<template>
  <div>
    <child title="My journey with Vue"></child>
  </div>
</template>

<script>
import child from './01-Child'
  export default {
    components: {
      child
    }
  }
</script>
Copy the code

2. The child component passes values to the parent component

  • Used in child components$emitPublish a custom event:
<template>
  <div>
    <h1 :style="{ fontSize: fontSize + 'em' }">Props Down Child</h1>
    <button @click="handler">Text increase</button>
  </div>
</template>

<script>
export default {
  props: {
    fontSize: Number
  },
  methods: {
    handler () {
      this.$emit('enlargeText'.01)}}}</script>
Copy the code
  • When using this component, usev-onListen for this custom event, and the parent component registers events that are triggered internally by the child component
<template>
  <div>
    <h1 :style="{ fontSize: hFontSize + 'em' }">Event Up Parent</h1>The text doesn't need to change here<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>

Copy the code

3. Pass values for unrelated components

Unrelated components communicate using custom events. Since there is no parent-child relationship, the child component can no longer trigger custom event passes. Instead, you need to use EventBus to create a public instance that serves as the event component or event center.

// eventbus.js
// No options need to be passed in order to invoke the instance $emit and $on to trigger and register the event
import Vue from 'Vue'
export default new Vue()
Copy the code

Then on both ends of the communication: use the $ON subscription

import bus from './eventbus'
// No arguments
bus.$on('Custom event name'.() = > { 
  // Execute the operation
})
/ / a parameter
bus.$on('Custom event name'.data= > { 
  // Execute the operation
})
Copy the code

Publish using $emit

import bus from './eventbus'
// There is no custom pass parameter
bus.$emit('Custom event name');

// There are custom pass parameters
bus.$emit('Custom event name', data);Copy the code

4. Other Common methods (not recommended)

This is only used when the project is very small or when developing custom components.

  • $root
  • $parent
  • $children
  • $refs

Ref two effects:

  1. When you use a ref on a normal HTML tag, you get the DOM
  2. If you use ref on the component label, you get the component instance

Note: Refs should not be used as a last resort, as they can cause data confusion.

Create a base-Input component

<template>
  <input ref="input">
</template>
<script>
  export default { 
    methods: { 
      // Used to focus the input box from the parent component
      focus: function () {
        this.$refs.input.focus()
      } 
    } 
  }
</script>
Copy the code

When using a child component, add the ref property:

<base-input ref="usernameInput"></base-input>
Copy the code

Then use $refs after the parent component is rendered:

mounted () {
  this.$refs.usernameInput.focus() 
}
Copy the code

The $refs only take effect after the components are rendered, and they are not responsive. You should avoid accessing $refs in templates or computed properties.

Three, simple state management scheme

If multiple components want to share state (data), using the above method can be implemented, but it is cumbersome, and multiple components pass values to each other difficult to track changes in data, if there is a problem is difficult to locate. Therefore, we can extract the shared state of multiple components and manage it in a global singleton pattern, in which our tree of components constitutes a huge “view” and any component can obtain the state or trigger the behavior no matter where it is in the tree. You may have already thought of Vuex. Here’s what simple way to do it first:

  • Start by creating a shared repository store object
export default {
  debug: true.state: {
    user: {
      name: 'xiaomao'.age: 18.sex: 'male'
    }
  },
  setUserNameAction (name) {
    if (this.debug) {
      console.log('setUserNameAction triggered: ', name)
    }
    this.state.user.name = name
  }
}
Copy the code
  • The shared repository store object is stored in the data of the component whose state needs to be shared
<template>
  <div>
    <h1> componentA </h1>
    user name : {{ sharedState.user.name }}
    <button @click="change"> Change Info </button>
  </div>
</template>

<script>
import store from './store'
export default {
  methods: {
    change () {
      store.setUserNameAction('componentA')
    }
  },
  data () {
    return {
      privateState: {},
      sharedState: store.state
    }
  }
}
</script>
Copy the code
<template>
  <div>
    <h1> componentB </h1>
    user name : {{ sharedState.user.name }}
    <button @click="change"> Change Info </button>
  </div>
</template>

<script>
import store from './store'
export default {
  methods: {
    change () {
      store.setUserNameAction('componentB')
    }
  },
  data () {
    return {
      privateState: {},
      sharedState: store.state
    }
  }
}
</script>
Copy the code

Vuex Review

1. What is Vuex

  • Vuex is a state management library designed specifically for vue.js
  • Vuex stores states that need to be shared in a centralized manner
  • Vuex is used for state management, communication of complex components, and data sharing
  • Vuex is integrated into DevTools and provides features such as time-travel time-travel history rollback

2. When to use Vuex

  • Don’t use Vuex when you don’t have to
  • Large single-page applications
    • Multiple views depend on the same state
    • Behaviors from different views need to change the same state

    Example: Shopping cart components

3. Vuex Core concepts

  • Store: A container that contains most of the state of the application. The state in the Store cannot be changed directly. The state must be changed by mutation.
  • State: is the State, stored in the Store, because the Store is unique, so the State is also unique, also known as a single State tree. The state here is reactive.
  • Getter: a computed property in Vuex that makes it easy to derive other values from one property. It internally caches computed properties and only recalculates them when dependencies change.
  • Mutation: The state transformation must be completed by submitting the Mutation.
  • Action: Similar to Mutation, except that Action can be performed asynchronously and that Mutation is committed whenever the state changes internally.
  • Module: When a Store is bloated, you can divide the Store into multiple modules with State, Mutation, Action, Getter, and even submodules in each Module.