preface

Over the past few years, I have been struggling in the it industry. Along the way, many have summarized some high-frequency interviews in the python industry. I see most of the new blood in the industry, and I still have all kinds of difficult questions for the answers to all kinds of interview questions or collection

Therefore, I developed an interview dictionary myself, hoping to help everyone, and also hope that more Python newcomers can really join the industry, so that Python fire does not just stay in advertising.

Wechat applet search: Python interview dictionary

Or follow the original personal blog: https://lienze.tech

You can also focus on WeChat official account and send all kinds of interesting technical articles at random: Python programming learning.

VueX

Vuex is a state management mode specially developed for Vue.js applications, which can facilitate data communication and sharing in Vue

With vuex, in vue, each component can access a vuex repository together

• Installing vuex

cnpm install --save vuex
# Install vuex into the current project directory and write the dependent files	

• Vue cli project configuration vuex

At the same level as the router directory in the project folder, create a store folder and create index.js in the directory

// /store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {data : "Data to be shared"}
})

export default store

Introduce this file into the main.js file of the project to register vue and use the vuex instance object. Note that the current store.js file is at the same level as main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store' // Import vuex instance

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store, // Vue store state management is used here
  router,
  components: { App },
  template: '<App/>'
})

state

It is used to manage public data. All vuex public data should be placed in the state of the Store

const store = new Vuex.Store({
    state: {count : 0}
})

Access data

• Access in component

this.$store.state.count

• Access in template

{{ $store.state.count }}

• mapState access

import {mapState} from vuex

mapState

You can use the mapState method to map global data to the calculated properties of the current component

computed: {
    ...mapState(['count']) // Use the expand operator to map calculated properties
}

Mutations

In Vuex, it is not allowed to directly manipulate data in components, such as the following error code

this.store.state.count++

The correct way is to modify the function in the changes attribute to monitor the source of variable changes and be more friendly to code maintenance

Modify data

For example, operate on a variable in state

export default new Vuex.Store({
  state: {count: 0},
  mutations: {
    add(state) { // The parameter represents the current global data object state
      state.count++ // Self increasing
    }
  }
})

Using the mutations method, in the component, trigger the add method through this.$store.commit

add() {
    this.$store.commit("add")
}

If you want to pass in parameters when calling the changes method, you can maintain additional parameters when defining the changes method

mutations: {
    add(state, num) { // The parameter represents the current global data object state
        state.count += num // Self increasing
    }
}

In the component, when the this.$store.commit method is triggered, you can pass in the parameters

addN(){
    this.$store.commit("addN", 3)
}

mapMutations

You can also map the required changes method to the methods method of the current component through mapchanges

For example, you have a way to subtract

mutations:{
    sub(state) {
		state.count--
    }
}

In the component, you can register it under the current component through mapMutations

methods: {
    ...mapMutations(["sub"]),
},

Then bind the sub method on the button to realize subtraction

If the method to be mapped has parameters, it can be passed directly according to the normal method

mutations:{
    subN(state, num) {
		state.count -= num
    }
}

...mapMutations(["subN"])

this.subN(2)

Actions

Asynchronous task

actions is used to process asynchronous tasks in vuex's business

If you want to process data asynchronously, such as through timers, you need to pass actions instead of directly using the methods under changes

To execute the method of changes under actions

• actions method for delaying data modification

actions: {
    addAsync(context) {
        setTimeout(() => {
            context.commit("add") // Still use the add method under changes
        }, 1000) // Call add with a delay of 1 second
    }
}

• To trigger the actions method, use the store's dispatch method

add_async(){
    this.$store.dispatch("addAsync")
},

mapActions

mapActions can also trigger methods in actions

import { mapActions } from 'vuex';

methods:{
    ...mapActions{
        ['add_async']
    }
}

Getter

Calculation properties

The data in the store can be processed, but the original data will not be affected, and only a new one will be generated

Moreover, similar to the calculation attribute, when the original data changes, the new value corresponding to the getter will also change

new Vuex.Store({
  state: {count: 0},
  getters:{
    showCount(state){
      return state.count+10
    }
  }
})

Then use the getters attribute in the component

this.$store.getters.showCount

mapGetters

You can also use the mapGetters method to map the attributes in getters

Note that it is defined in the calculated properties of the component

import { mapGetters } from 'vuex'

computed: {
    ...mapGetters(
    	['showCount']
    )
}