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