vuex + watch = listener component rendering state

We often have such a demand, after a component has been rendered to the data request, the request related to this value.
First thought is executed mounted inside

created: the template rendered before calling html, which is usually initialize certain property values, and then rendered into view.
mounted: After rendering the template into html calls, usually after page initialization is complete, and then the html dom node performs some operations needed.

After testing found: page has rendered, not rendered sub-assemblies, mounted it can not meet the requirements.

Later, God help large degree + mother, finally we found a reliable solution! ! !
vuex + watch (vueX global state management, watch variables are listening to the vue)

Step is, the definition of a variable to hold the assembly in vuex rendering state, the default component is not rendered.

State: { 
    isFinish: to false, // component rendering state 
  }, 
mutations: { 
    SET_IS_FINISH (State, isFinish) {// modify the state of the global assembly method 
      state.isFinish = isFinish; 
    }, 
  }, 
// since the component binding value, when the value exists, the component had been rendered complete. Therefore, in a method of assembly, this value will be set to true; 
  beforeDestroy: function () { 
    . Store.commit the this $ ( 'SET_IS_FINISH', to false); 
  }

  If this component in multiple use, be sure to log off when the page, change the state back, so watch monitor will be effective.

Components used on a page, the status monitor, when the value is true, the rendering is completed assembly. At this time, making the page request, the accuracy!

computed: { 
        myfinish () { 
          return the this $ store.state.isFinish;. 
        }, 
    }, 
Watch: { 
      myfinish (newVal, oldVal) { 
  // Here, the rendering component has completed, the operation may be performed for dom, may be request data is completed after the component rendering. 
      } 
    }

 

This perfect realization of the effect we want, since it is necessary to wait for the results of the component rendering, use it to request data.
VUEX + watch is a very good solution! ! !

 

 

 

Guess you like

Origin www.cnblogs.com/CatcherLJ/p/11609333.html