This is the 22nd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The clouds cleared early this morning

preface

In my last article, I wrote about the principles and small cases of global event bus in Vue.

In the previous article, I briefly said the core idea of Vue that I personally understand (I just learned it, if there is any deficiency, please correct it in time).

  1. Two-way binding of data, no more manual manipulation of DOM elements
  2. Component development, where a page is divided into small parts and pieced together step by step

Component development, the biggest pain point may be to achieve arbitrary component communication, the essence of component communication is data sharing.

For communication between components, I also wrote this step by step earlier

  1. Components use props to implement communication between components (this is applicable to parent-child component communication, or parent-child component communication, but is not friendly to sibling components)
  2. Communication between components using custom events (ditto)
  3. The global event bus implements the case of communication between any component (any component can communicate)
  4. Communication between components via third party library publish/subscribe (for the record, I personally feel that the event bus in Vue is more in line with the Vue ecosystem than publish/subscribe, so I didn’t write this article)

The text…

Why Vuex?

thinking 🧐

I wonder why Vuex should be added to the Vue ecosystem when the global event bus can communicate with any component. Doesn’t it seem a little repetitive?

Component communication is actually the realization of data sharing and add, delete, change and check.

In the global event bus, by adding a $BUS attribute to the prototype of the Vue during the beforeCreate life cycle in the VM, methods can be bound to the $BUS attribute on all components using $ON and $EMIT, and data can be passed between different components through method parameters. This approach solves the problem of data transfer between multiple hierarchies of sibling or grandparent components.

But the data itself exists inside one component, and then other components modify the data by triggering callbacks. This means that if we want to implement component communication, we must write a method in the child component that triggers the pre-bound callback function in the parent component. What if there were more and more components to manipulate this data? What will happen??

Think carefully 🤔, we are modifying a shared data, why write similar and duplicate code on both ends?

Couldn’t we just write in the child component, and then immediately detect the data change in the parent component, and then update it to the view layer?

Vuex

Vuex official document

In the official documentation, Vuex is described as follows:

It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool devTools Extension (Opens New Window), providing advanced debugging functions such as zero-configuration time-travel debugging and state snapshot import and export

Vuex pulls all the data to be shared into the same group chat. Centralized management is the same with the method of adding, deleting, changing and checking. You can directly call the method to manipulate any data.

In addition, vUE also provides debugging tools. For example, when we use the global event bus, the operation data will not have a history record, but with Vuex, open the debugging tool, you can see the history of your operation data, which is incomparable to other ways.

Get to the point, get to the point: Why Vuex?

It’s easy to break the simplicity of one-way data flow when multiple components share state in our application:

  • Multiple views depend on the same state.
  • Actions from different views need to change the same state.

For problem one, the method of passing parameters can be cumbersome for multi-layer nested components and does nothing to transfer state between sibling components.

For problem two, we often use parent-child components to reference directly or to change and synchronize multiple copies of state through events.

So why don’t we extract the shared state of the components and manage it in a global singleton? In this mode, our tree of components forms a giant “view” where any component can get state or trigger behavior no matter where it is in the tree!

You define a central repository in which all components can access and manipulate the data, and update the component view that uses the data as it changes.

By defining and isolating concepts in state management and by enforcing rules to maintain independence between views and states, our code becomes more structured and maintainable.

Vuex allows us to extract all of the data and the way we manipulate it, both at the code level and in terms of data management, without having to bind it in advance, trigger sub-components, and execute callback functions to update the view, as is the case with the global event bus.

Advice:

Vuex is convenient, but if your project doesn’t have a huge application, you can actually use the simple Store model. You don’t need to use Vuex because it can make your code redundant.

To write a small demo, let’s use props and the global event bus.

After the language

Everyone come on!! If there are deficiencies in the article, please point out in time, in this solemn thanks.

The paper come zhongjue shallow, and must know this to practice.

Hello everyone, I am ning Zaichun: homepage

A young man who likes literature and art but takes the path of programming.

Hope: by the time we meet on another day, we will have achieved something.

Set up shop set up shop

୧ ⍤ ⃝ 🥖 bread ୧ ⍤ ⃝ 🍔 Hamburg ୧ ⍤ ⃝ 🍟 fries ୧ ⍤ ⃝ 🍗 Fried chicken leg ୧ ⍤ ⃝ 🍕 pizza ୧ ⍤ ⃝ 🌭 hot dog ୧ ⍤ ⃝ 🥪 sandwich ୧ ⍤ ⃝ 🌮 coke cake ୧ ⍤ ⃝ 🥙 apply ୧ ⍤ ⃝ 🥘 seafood pizza ୧ ⍤ ⃝ 🌯 chicken roll ୧ ⍤ ⃝ 🍡 three color small balls ୧ ⍤ ⃝ 🍲, potatoes ୧ ⍤ ⃝ 🍱 bento ୧ ⍤ ⃝ 🍘 fairy bei ୧ ⍤ ⃝ 🍙 rice ୧ ⍤ ⃝ 🍛 curry rice ୧ ⍤ ⃝ 🍜 ramen ୧ ⍤ ⃝ 🍝 pasta ୧ ⍤ ⃝ 🍣 sushi ୧ ⍤ ⃝ 🍤 Fried shrimp ୧ ⍤ ⃝ 🎂 big cake ୧ ⍤ ⃝ 🧁 cupcakes ୧ ⍤ ⃝ 🍰 small egg ice-cream ୧ ⍤ ⃝ 🍮 pudding

Above all a praise, a praise you can’t buy a loss, a praise you can’t buy a fool, the real value for money