使用vue开发中碰到的问题系列

1、RangeError: Maximum call stack size exceeded
一般vue-router报错说明是路由配置出问题了，或者跳转调用路由的时候出现死循环，RangeError: Maximum call stack size exceeded是死循环出现的语句，这种情况先检查组件中是否有重名调用，如果有应重新考虑组件命名。

2、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);
    }
}

3、[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重新传递给子组件。

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