vue报错信息(二)之 Error: [vuex] Do not mutate vuex store state outside mutation handlers.
文章 3340 0 0 0
发布时间:2019年05月15日

概述

报错原理解读

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

该报错从文本意思理解还是很清晰的,不要在mutation函数外修改vuex中存储的值。

通常情况下,vuex挂载到vue上之后,vuex中的值可以在组件中修改

this.$store.state.count = 1

但我们不推荐这种做法,这是一种代码规范,建议不要在mutation函数外修改state的值,避免不必要的参数混乱。

至于要不要遵循这种规范,完全取决于你。vuex也很贴心的提供了严格模式,来控制是否提示不规范的store值修改

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getters from './getters'
import defaultState from './state'
import mutations from './mutations'

Vue.use(Vuex) // 将Vuex挂载到Vue

const debug = process.env.NODE_ENV !== 'production'

export default () => {
  return new Vuex.Store({
    strict: debug, // 严格模式,是否能在mutation外修改state值,true → 不能修改,false → 可以修改
    actions,
    getters,
    state: defaultState,
    mutations
  })
}

注意:开启了严格模式之后,若在mutation外修改值,也能动态渲染到页面上,只是vue会有警告提示,类似于这样

vue报错信息(二)之 Error: [vuex] Do not mutate vuex store state outside mutation handlers.

这种情况我们只需要把strict: debug关掉即可,不过追梦猪在编写的时候发现mutation修改值还是会出现这样的错,实在很无奈只能关掉了strict

评论专区