使用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打包路径配置的不对，修改即可