const { obj } = this.props 写法

const {dispatch} = this.props;

这段代码你可以认为是这样：

const dispatch = this.props.dispatch;

那样写是 ES6 的简写形式。

对象的hasOwnProperty

判断对象内是否有此属性

Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。

var o = new Object();
o.prop = 'exists';

function changeO() {
  o.newprop = o.prop;
  delete o.prop;
}

o.hasOwnProperty('prop');  // true
changeO();
o.hasOwnProperty('prop');  // false

箭头函数

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) {
  return element.length;
}); // 返回数组：[8, 6, 7, 9]

// 1. 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 2. 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]

// 3. 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 "length" 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

export const

Vuex

import * as api from '@/api/mapCommon.js';

const state = {
    // 矢量图配置信息
    vmapConfig: {
        mapEnable:0
    },
    // 测量方式(测距/测面)
    currMeasure: '',
    // 是否全屏
    isFullScreen: false
}

const mutations = {
    // 获取矢量图配置信息
    GET_VMAP_CONFIG (state, val) {	// 参数都是从第二个开始的，第一个就是上方的 state
        state.vmapConfig = val;
    },
    SET_CURR_MEASURE (state, val) {
        state.currMeasure = val;
    },
    SET_FULLSCREEN_STATUS (state, val) {
        state.isFullScreen = val;
    },
    CHANGE_FULLSCREEN_STATUS (state) {
        this.commit('mapCommon/SET_FULLSCREEN_STATUS', !state.isFullScreen);

    }
}

const actions = {
    getVmapConfig ({ commit }) {
        api.getVmapConfig().then(res => {
            res = JSON.parse(res)
            commit('GET_VMAP_CONFIG', res);
        });
    }
    getPermission({ commit }, userId) {
        return new Promise(async (resolve, reject) => {
            getPermission(userId).then(res => {
                const menuList = res.data.users[0].menuNodes
                commit('SET_MENU_LIST', menuList)
                resolve(menuList)
            }).catch(error => {
                reject()
            })
        })
    }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

mapState -> state

import { mapState } from 'vuex';

computed: {
    ...mapState({
        currMeasure: state => state.mapCommon.currMeasure,
    }),

},

this.$store.state.mapCommon.currMeasure	// 可直接调用

mutations

// 标记打点
setTag () {
    this.$store.commit('mapCommon/SET_CURR_MEASURE', '')	
    this.$emit('setTag')
},

mapActions -> actions

import { mapActions } from 'vuex'

methods: {
    // 方法 1 
    ...mapActions({
        getVmapConfig: 'mapCommon/getVmapConfig',	//...mapActions的方法	调用不同Module的数据必须这样写 mapCommon 这个是模块名
    }),
   // 方法 2
    getVehicleParams () {
        this.$store.dispatch('realTimeMonitor/getVehicleParams')	// 直接调用得方法
    }
}

this.$store.dispatch

两个方法都是传值给vuex的mutation改变state

dispatch：异步操作，数据提交至 actions ，可用于向后台提交数据
this.$store.dispatch('isLogin', true);

this.$store.commit

commit：同步操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里
this.$store.commit('loginStatus', 1);

注：必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功。

Mixin

import { regex } from '@/utils/validate'
export default {
    data() {
        return {
            validErrorMsg: {
                userName: '请输入1-50个字符且不包含空格 ‘ “ ；：& @',
                password: '请输入8-32字符且不包含空格 ‘ “ ；：& @',
            }
        }
    },
    methods: {
        /**
         * @description 校验方法
         * @param {Object} rule 校验规则
         * @param {String} value 值
         * @param {Function} callback 回调
         */
        regexEpValidRules(rule, value, callback) {
            if (regex[rule['validRule']].test(value)) {
                callback()
            } else {
                callback(new Error(this.validErrorMsg[rule['validRule']]))
            }
        },
    }
}

import mixin from '@/mixins'
export default {
    mixins: [mixin],
    
    methods: {
        toggleSideBar() {
            this.regexEpValidRules('app/toggleSideBar')	// 可以直接用
        },
    }
}

组件 props

<ddd aa-bb = 'cc' />

props: {
    cc:{
        type: String,
        default: ''
    },

父组件

<alarmImages
	v-if="!noImages"
	:picture-str="picture"
	:alarm-date="alarmDateStr"
	:location-name="locationName"
/>

import alarmImages from './alarmImages.vue'

export default {
    components: {
        alarmImages,
    },
}

子组件

<template>
  <div class="alarm-images">
    <div><span>{{ $t('alarm.modal.time') }}</span><span>{{ alarmDate }}</span></div>
    <div class="alarm-modal-address">
      <span>{{ $t('alarm.modal.address') }}</span><span>{{ locationName }}</span>
    </div>
    <img
      v-for="item in imageList"
      :key="item"
      :src="item"
      alt=""
      class="alarm-images-item"
    >
  </div>
</template>

<script>
import { queryAlarms } from '@/api/alarm-process/index.js'
export default {
    props: {
        pictureStr:{
            type: String,
            default: ''
        },
        alarmDate: {
            type: String,
            default: ''
        },
        locationName: {
            type: String,
            default: ''
        }
    },
    methods：{
    	changeFilter() {
            console.log(this.pictureStr)	// 直接在这里使用
        }
	}
}
</script>

this.$parent

this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！