使用vue開發中碰到的問題系列

RangeError: Maximum call stack size exceeded

通常vue-router報錯說明是路由配置出問題了，或者跳轉調用路由的時候出現死循環，RangeError: Maximum call stack size exceeded是死循環出現的語句，這種狀況先檢查組件中是否有重名調用，若是有應從新考慮組件命名。

Computed property "XXX" was assigned to but it has no setter

形成這種問題的根源在於XXX屬性在vue表單中，使用v-model進行雙向綁定且須要在computed中進行計算更新時，須要保證XXX屬性具備setter方法才能計算。 下面以個人store做爲示例：

• 方案1（vue官方推薦）

// store.js
const app = {
  state: {
  	praiseCheckStatus: false,
  },
  mutations: {
  	SETPRAISECHECKSTATUS(state, data) {
  		state.praiseCheckStatus = data;
  	},
  },
  actions: {
  	setPraiseCheckStatus({commit}, data) {
  		commit('SETPRAISECHECKSTATUS', data);
  	},
  },
};

export default app;
複製代碼

computed: {
  praiseCheckStatus: {
  	get () {
  		return this.$store.state.app.praiseCheckStatus;
  	},
  	set (newValue) {
  		this.$store.dispatch('setPraiseCheckStatus', newValue);
  	}
  }
}
複製代碼

• 方案2

// store.js
const app = {
    state: {
  	  praiseCheckStatus: { checked: false },
    },
    mutations: {
  	  SETPRAISECHECKSTATUS(state, data) {
  		  state.praiseCheckStatus.checked = data;
  	  },
    },
    actions: {
  	  setPraiseCheckStatus({commit}, data) {
  		  commit('SETPRAISECHECKSTATUS', data);
  	  },
    },
};

export default app;
複製代碼

computed: {
    ...mapState({
  	  praiseChecked: state => state.app.praiseCheckStatus
    })
},
methods: {
    praiseCheckboxChange(e) {
  	  this.$store.dispatch('setPraiseCheckStatus', e.target.checked);
    },
}
複製代碼

這樣須要在表單中v-model="praiseChecked.cheked" 便可，實際上是利用Object對象自帶get、set方法，因此沒有直接對計算屬性進行計算，而是對該計算屬性對象的某個屬性值進行賦值。

還有另外的錯誤狀況，好比：

computed: {
    ...mapState({
  	  list: state => state.app.list
    }),
},
methods: {
    delete() {
  	  ....... // 執行過程
  	  this.$store.dispatch('setPostCommentList', this.list);
    }
}
複製代碼

因爲computed計算結果屬性會映射到當前vue組件的data數據源中，因此咱們能夠直接this.list來使用這個計算後的屬性，但上面這種狀況是咱們把this.list處理改變了this.list原有數據後直接塞回store中的行爲會報這個錯誤，由於vuex的stroe中的數據是隻讀的，想要改變store中的數據須要經過dispatch或commit來觸發改變，因此不能在組件中直接操做store中的數據並從新dispatch或commit，須要用一個新的數據副原本進行dispatch或commit

• 解決方案:

methods: {
    delete() {
  	  ....... // 執行過程
  	  // 執行刪除僞代碼，這裏的刪除依然不能改變this.list的原有數據結構
  	  // newList是一個全新的數組
  	  const newList = this.list.delete(); 
  	  this.$store.dispatch('setPostCommentList', newList);
    }
}
複製代碼

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "XXX"

形成這個問題的緣由是vue中不容許直接操做經過props傳過來的數據。 解決辦法很簡單，在data中建立一個副本YYY變量，初始值爲props屬性XXX的值，同時在組件內全部須要調用props的地方調用這個data對象YYY，副本變量發生變化後，經過this.$emit()方法告訴父組件XXX須要發生變化，父組件中將數據處理後再經過props從新傳遞給子組件。

Refused to apply style from 'xxx.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

緣由：webpack打包路徑配置的不對，修改便可