Vuex status manager - communication between components

Vue has two core functions: data-driven and componentization.
Component development brings us:
Faster development efficiency
Better maintainability
Each component has its own state, view, and behavior components.

Status management includes the following parts:
state, the data source driving the application;
View, which maps the state to the view declaratively;
actions to respond to the state changes caused by user input on the view.


Review of communication modes between components
The components in most scenarios do not exist independently, but cooperate with each other to form a complex business function. In Vue
Different component relationships provide different communication rules

Father to son: Props Down

Subcomponents

Parent component

Event Up

Subcomponents
Publish a custom event in a subcomponent using $emit

Parent component
When using this component, use v-on to listen for this custom event

Non parent and child components: Event Bus

eventbus.js :

import Vue from 'vue'
export default new Vue()

Publish using $emit:

<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>

<style>
.number {
  display: inline-block;
  cursor: pointer;
  width: 20px;
  text-align: center;
}
</style>

Subscribe with $on:

<template>
  <div>
    <h1>Event Bus Sibling02</h1>

    <div>{{ msg }}</div>
  </div>
</template>

<script>
import bus from './eventbus'
export default {
  data () {
    return {
      msg: ''
    }
  },
  created () {
    bus.$on('numchange', (value) => {
      this.msg = `You have chosen ${value}Pieces of goods`
    })
  }
}
</script>

<style>

</style>

Parent direct access sub component: obtain sub components through ref

ref has two functions:
If you apply it to ordinary HTML tags, you get the DOM
If you apply it to the component tag, you get the component instance

Subcomponents:

Parent component:
Add when using sub components:

<child ref="c"></child>


Can get data

this.$refs.c.focus()

Simple state management scheme

It can be understood that a small warehouse has been established

If multiple components want to share state (data), the above method can be implemented, but it is troublesome. Moreover, it is difficult to track the change of data when multiple components pass values to each other. If there is a problem, it is difficult to locate the problem.
When multiple components need to share state, a typical scenario is shopping cart. If the above schemes are not suitable, we will encounter the following problems
(multiple views depend on the same state.)
(behaviors from different views need to change the same state.)
For problem 1, the method of parameter transfer will be very cumbersome for multi-layer nested components, and there is nothing to do about the state transfer between sibling components.
For problem 2, we often use parent-child components to directly reference or change and synchronize multiple copies of the state through events. Above this
These patterns are very fragile and often lead to unmaintainable code.

Therefore, why don't we extract the shared state of components and manage them in a global singleton mode? In this mode, our component tree constitutes a huge "view". No matter where in the tree, any component can obtain status or trigger behavior!
We can store the state of multiple components or the state of the whole program in a centralized location, and we can detect the change of data. You may have thought of Vuex.
Here we first implement it in a simple way

store.js (small warehouse):

First, create a shared warehouse object.
Store the shared warehouse store object in the data of the component that needs to be shared

One of the components that wants to get data:
Other components are used in the same way.

There are some plagiarism in the study notes!!

Tags: Javascript Front-end Vue.js

Posted on Wed, 01 Dec 2021 17:51:42 -0500 by gskurski