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