This is the 10th day of my participation in Gwen Challenge

One, foreword

Today, I completed a file uploading function in the project development. I encountered a problem before, that is, after the file is uploaded successfully, the image URL is returned, but the image is not displayed. The problem in the browser is as follows:

https://platform.giantenergy.com.cn/filecenter/sub-station/PersonalInfo/c30.png 403 (Forbidden)
Copy the code

Turn on reference to tell you which page to jump to, and add it to index. HTML to return the message successfully

<meta name="referrer" content="no-referrer" />
Copy the code

Of course, that’s not the point of this article, because when the file was uploaded successfully, there was no notification that the small image in the upper right corner was replaced.

This means that even though I uploaded successfully and updated the user information in the cache, the small image in the header was loaded from the cache at the time of login and was not loaded later. So after you have successfully changed the user information, you need to notify another page to make an update. This is the method that calls another page.

On and emit

$emit(eventName): Triggers an event

$on(eventName,callBack): listens for events

The relationship between the two is that, if Vue is regarded as a family (equivalent to a separate component), the hostess always assigns the emit man to do things at home, and the man always listens on the events triggered by the eventName in the hostess’s emit. Once the emit event is triggered, On listens for the event sent by the EMIT and executes the on method.

Specific operations can be seen in the official documentation

Three, start rectification

3.1 Give them a relay station and new a VUE instance

Create a clearStore.js and add the following:

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

Copy the code

3.2 Then both pages introduce this hub:

import Utils from '.. /.. /.. /clearStore'Copy the code

3.3 Writing method of the caller

onSubmit(){ let form = this.$data.form this.$data.loading = true; This.$api.req("/sm/info/user/edit",form,res =>{this.$message.success(" operation succeeded ") // Update store. this.$data.loading = false; $emit('demo',' MSG ')},res => {this.$message.error(res.msg) this.$data.loading = false; })},Copy the code

3.4 Writing method of the called party

 mounted() {
    var that =this
    Utils.$on('demo',function (msg) {
      that.init()
    })
  },
  
init(){
   let user = StoreService.getUser()
   this.$data.squareUrl = user.avatar
},
Copy the code

Finally achieve this goal: