RangeError: Maximum call stack size exceeded

The vue-router error indicates that the route configuration is incorrect, or there is an infinite loop when the route is called. RangeError: Maximum Call Stack Size exceeded is a statement that occurs in an infinite loop. In this case, check whether the component has the same name. If yes, reconsider the component name.

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

The root cause of this problem is that in a VUE form, if the XXX attribute is bidirectional bound using v-Model and updates need to be computed in computed, you need to ensure that the XXX attribute has setter methods. Here’s my store as an example:

  • Option 1 (vUE official recommendation)
// store.js
const app = {
  state: {
  	praiseCheckStatus: false,},mutations: {
  	SETPRAISECHECKSTATUS(state, data){ state.praiseCheckStatus = data; }},actions: {
  	setPraiseCheckStatus({commit}, data) {
  		commit('SETPRAISECHECKSTATUS', data); ,}}};export default app;
Copy the code
computed: {
  praiseCheckStatus: {
  	get () {
  		return this.$store.state.app.praiseCheckStatus;
  	},
  	set (newValue) {
  		this.$store.dispatch('setPraiseCheckStatus', newValue); }}}Copy the code
  • Scheme 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;
Copy the code
computed: { ... mapState({praiseChecked: state= > state.app.praiseCheckStatus
    })
},
methods: {
    praiseCheckboxChange(e) {
  	  this.$store.dispatch('setPraiseCheckStatus', e.target.checked); }},Copy the code

V -model=”praiseChecked. Cheked “; v-model=”praiseChecked. Cheked “;

There are other error cases, such as:

computed: { ... mapState({list: state= > state.app.list
    }),
},
methods: {
    delete(){...// Execute process
  	  this.$store.dispatch('setPostCommentList'.this.list); }}Copy the code

Because computed result attributes are mapped to the data source of the current VUE component, we can use the calculated attributes directly with this.list. However, in the above case, we changed the original data of this.list and then directly inserted it back into the store. This error was reported because the data in vuex’s stroe is read-only, and to change the data in the store, we need to trigger the change through Dispatch or commit. Instead of directly manipulating the data in the store and redispatching or committing it, you need to dispatch or commit it with a new copy of the data

  • Solution:
methods: {
    delete(){...// Execute process
  	  // Perform the delete pseudocode, the delete still does not change the original data structure of this.list
  	  // newList is a brand new array
  	  const newList = this.list.delete(); 
  	  this.$store.dispatch('setPostCommentList', newList); }}Copy the code

[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"

The reason for this problem is that vUE does not allow direct manipulation of data passed through props. This.$emit() method is used to tell the parent component that XXX needs to be changed by creating a copy of the YYY variable in data with the initial value of the props property XXX and calling the data object YYY where the props property XXX needs to be called. The parent component processes the data and passes it back to the child component via 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.

Cause: The webpack path is incorrectly configured. You can modify it