List them first and fill them out slowly

The hook function is not running

The hook function is not running.

I don’t know why, but I think it’s probably because dist doesn’t recompile directly after you delete something.

I’m going to delete the dist folder and recompile it

Vuex use

Juejin. Cn/post / 684490…

Setting data field "$root.0.registered" to undefined is invalid.
Copy the code

I must make a judgment that undefined cannot be assigned to storage.

In addition, the assignment of state cannot be done in the callback, so you need to use a closure to pull data out of it.

initStates(states) {
    for (var key in states) {
        var data
        mpvue.getStorage({
            key,
            success(res)  {
                data = res.data
            }
        })
        if (data) {
            states[key] = data           
        }
    }
},
Copy the code

EventBus

Event bus is not recommended for communication. One of the core advantages of MPVUE is vuex. Vuex is best for communication, even if you are only a small project, the cost of using Vuex is very low.

So when do you need an event bus?

Demand scenarios

I don’t want the logon logic to only do it during the first page rendering, checking for logins in all cases where logins are needed.

Train of thought

Using a VUE instance as the event bus, listen for the loginRequired event to perform the login logic. The logon logic here is an asynchronous function because the applet interface is asynchronous.

The instance that triggers the event blocks subsequent logic and continuously listens to the loginState state to determine whether the login is complete.

As you can see, the event bus can be used as a wrapper around a global usage method, and Vuex can be used to perform asynchronous functions well.

implementation

The implementation is singled out here because mpVue has a different mechanism than Vue.

Here is the EventBus I used to implement the logon logic

import Vue from 'vue'
import { login } from './utils/index' // encapsulates an asynchronous login function

var bus = new Vue({
    methods: {
        login: async function () {
            var state = this.$store.state
            
            if (state.global.loginState <= 0) {
                this.$store.commit('changeLoginState'.1)
                await login.call(this)}else {
                return
            }
        },
    }
})

bus.$on('loginRequired', () = > {console.log('on event loginRequired');
    this.a.login()
})

export default bus
Copy the code

Let me give you some details

$onCan’t write in mounted

An important point here is that each page in MPVUE is an independent vUE instance.

App. vue mounts do not execute, I tested it, app. vue mounts do not execute.

I did not notice this statement in the document. Please correct me if I am blind.

Created hooks are created on all pages when you open an applet. Created hooks are created on all pages when you open an applet. BeforMounted and Mounted are executed after onReady, so beforMounted and Mounted are executed only when the page is accessed.

This does not refer to an instance

Notice that this.a.login() is used when method is called. This is the result of mpvue precompilation, see the precompiled main.js.

The computed unavailable

I haven’t solved this problem yet, so I’m going to put what I want to calculate directly into v-if for the moment. Leave a comment if you know the problem

Data there are several logo variables, according to the need to calculate the content of multiple logo is displayed, directly to the key source code.

. <div class="cu-btn bg-green lg" 
         v-if="idAvailable && ! checking && confirming"
         @click="setContact"> Verify the association </div> <div class="cu-btn bg-green lg" 
         v-if="idAvailable && ! checking && ! confirming"> Confirm success </div>... computed { confirmed: () => this.idAvailable && ! this.checking && ! this.confirming }data () {
        return {
            from_id: undefined,
            idAvailable: false,
            checking: true, // Confirming:true, // It has been confirmed}},...Copy the code

I get an error after I write the calculated property, twice

Setting data field "$root.0.confirmed" to undefined is invalid.

The cause of the problem is not clear yet, I will put forward an issue later when I am free, and I will update it if it is solved.