background

I’m making a page effect, which is to click navigation on the home page, or any other button to create a TAB in the main display area, also with the breadcrumb effect. At the beginning, I did not enable the router effect of the menu, but only made the desired effect by clicking the event of menu group price. I used the event bus to transmit parameters, because the event bus can transmit parameters between any components. The use of event bus can be referred to my “Learning Vue3.0 By Hand” : Vue3.0 Correctly Use Bus Mitt for Component communication and parameter transfer. The event bus is characterized by mounting events where they originate and listening for events on receivers that need to follow changes. I chose VUex because I found the time-bus approach to be a disadvantage when implementing complex scenarios, so let’s take a look at how to use Vuex.

The reason for abandoning the bus

Here’s an example of what my page looks like:

  1. Because the menu component has routing enabled, routing is updated with each click
  2. The TAB and breadcrumb components depend on menu changes, and the breadcrumb and TAB components require additional properties to be effective
  3. The menu and breadcrumbs have to be changed when the TAB is switched. This time, more events will be written, and the code already starts to look ugly. The unstructured code starts to appear, which is not good for maintenance.
  4. The event itself is a very pure operation and becomes impure in order to achieve the effect.
  5. The limitation of parameter passing is that the listening component requires different parameters

Based on the above points, I think Vuex is more suitable for this scenario. Vuex is centrally managed, globally singleton unique, and VUE “injects” state from the root component into each child component, making it very easy to use.

Vuex learning method

The vuex4.x version corresponding to vue3. X is still a pure English website at present. My recommended learning method is as follows:

  • Learn what vuex has and how to use it first by referring to the Chinese version of 3.x.
  • Be sure to read the 3.x document from beginning to end and summarize your understanding
  • 3. X directory and 4. X directory are corresponding, most of them are the same, differentiation can be directly translated, good English directly read, bad can also read, exercise yourself can also.

  • Look directly at 4.x in the code part. Everyone can understand the code part. If there is any difference, please pay special attention to it.

  • For a long time, read English several times is so the thing, the most important Chinese and English contrast, you can learn English for free.
  • Always try, even if it’s wrong, you’ll never know how it works. The code belongs to the hand that did it. The difference between hands-on roots and hands-on roots is huge, especially when one person is in charge of the entire project.

The core idea of Vuex

The core of state management is the following three aspects:

  • State, the data source that drives the application;
  • View, to declaratively map state to the view;
  • Actions, in response to changes in state caused by user input on the view.

Now LET me talk about my own understanding of these three cores:

  • State is the global data that we give vuEX to manage
  • View binds state in VUex to page rendering
  • Actions, that’s the API for manipulating state

According to my escape, you can have a simple overall understanding in mind, that is, vuex provides a place to put data. It is not recommended to take the data directly, but to operate it with the API recommended by vuex. It is used like binding other variables, and the page is automatically rendered. In the field breakdown part, I will explain clearly where state is written, what is provided in vuex’s index.js and how it is used in our component.

Vuex integration

  • Separate setup command
npm install vuex@next --save
Copy the code
  • Projects generated with CLI scaffolding are automatically integrated, usually in the Store directory.

  • The index.js code is as follows:

State: Indicates the existence state, data area

Mutations: The only way to change state, defining the method for committing, all mutations are synchronous methods

Actions can contain asynchronous operations. Actions can combine and call other actions, which also manage the state commit. The use of state for components that use state is managed independently by VEX.

Modules: Modules or groups, if the project is large and vuex manages a lot of states, it is a bit bloated to write to a file, which is divided into different modules, the individual file is very small, and it is easier to manage in a single file. In most cases, it is enough to write in index.js.

  • Introduce store in main.js

  • The above code is automatically generated by scaffolding, directly used can be, my these are the latest version based on VUe3.0, cli4 after.
  • This is the end of vuex integration.

Vuex combat breakdown

I’m going to talk about this in terms of both what is defined in VUEX (how it is encoded in store) and how it is used in components. These writing methods are fixed routines, you first recite, then you can write how you want to write.

1.store

import { createStore } from "vuex";

export default createStore({
  state: {
    todos: [{id: 1.text: "...".done: true },
      { id: 2.text: "...".done: false}].count: 0
  },
  getters: {
    doneTodos(state) {
      return state.todos.filter(todo= >todo.done); }},mutations: {
    increment(state) {
      // mutate statestate.count++; }},actions: {
    increment(context) {
      context.commit("increment"); }},modules: {}});Copy the code
  • State defines two states: todos and count
  • Getters is through the Getter Property access state, which can contain some logic, only reads, no updates. The Getter in the use component caches and synchronizes updates.
  • Mutations is the definition of everything, the only way. Called by commit
  • Actions are abstractions that encapsulate the COMMIT so that the commit is transparent for use by the component.
  • Modules don’t worry about it for now, just cutting into store, the same usage.
  • If you have an object-oriented mindset, the data definition and the operations are all wrapped up in you, you can use the direct call API externally, you don’t need to pay attention to the internal details, and you don’t need to use the direct store externally.

2. Specific usage of components:

  • Gets the status value in the calculated property. This is when the Getter defined above comes into play and you can use the helper functionMapState, mapGetters. Vex4.x is the same as vex3.x code in this area.

​​​​​​​     

  • You can commit changes in any method by calling the action abovestore.dispatchMethod, you can use helper functionsmapActions

​​​​​​​   

  • MapMutations can be used if action is not defined, but it is not recommended

​​​​​​​

  • In actual use, auxiliary functions + abbreviations are used, so that the code is simple, easy to maintain, the recommended way

conclusion

  • Be sure to follow conventions because of the idea of configuration to make your code more elegant
  • Vuex can be used in that sentence: 1. Write state, getters, mutations, actions in store. 2. Use helper functions in components to fetch and commitMapState, mapGetters, MapMutations,mapActions
  • By taking it apart and putting it back together, you can see how the Vuex works with other core components and know them by heart.
  • If the core is not abstract out, the brain is still a pot of porridge, it seems to understand, but do not know where to start to say, or organize an effective discourse to make it clear.
  • My article addresses that question. The code here is the official example, I will open source my code later.
  • If you like three-click, comment, like, add follow.