[Vue]對Vue，Vuex.store，mixins理解

== vue ==

this.$dispatch、this.$broadcast棄用，改用this.$emit、this.$on

this.$emit：子組件調用父組件傳給子組件的方法
this.$on/this.$once：創建一個事件監聽，可用this.$emit觸發
this.$off：刪除一個事件監聽

this.$set：新增/修改嵌套對象屬性，可觸發視圖更新

 

 

== vuex.store ==
PS：當作全局變量
PS：里面的方法都是對state的變量進行修改

state：存放變量數據
-> this.$store.state.變量名
getters：返回計算結果，相當於C#的GET/SET方法中的GET
-> this.$store.getters.變量名
mutations：同步方法，相當於C#的GET/SET方法中的SET
-> this.$store.commit('方法名', 參數...);
actions：對mutations方法進行異步操作，建議后綴加上Asyn
-> this.$store.dispatch('方法名', 參數...);

mapState/mapGetters/mapMutations/mapActions：映射state/getters/mutations/actions到this
-> import { mapState, mapGetters,mapMutations, mapActions } from 'vuex';
-> computed: {
-> ...mapState(['變量名'...]), // 不用在data聲明，即可在本頁內<template><script>使用
-> ...mapGetters(['變量名'...]), // 同上
-> },
-> methods: {
-> ...mapMutations(['方法名'...]), // 可在本頁內調用，this.方法名(參數...);
-> ...mapActions(['方法名'...]), // 同上
-> },

 

== mixins ==
PS：內部方法可以被頁面方法重寫，參考：https://www.jianshu.com/p/bcff647d24ec
PS：官方建議添加前綴$_，防止污染

-> import 混合對象 from '混合對象路徑';
-> mixins: [混合對象...], // 此處會調用內部生命周期
// 映射到this，可在本頁內調用，this.混合對象內部方法名(參數...);