VUEX-action可以修改state吗

首先回顾下vuex，官网图如下

  • Vuex 的 store 中的状态的唯一方法是提交 mutation（mutation类似于事件且必须是同步函数）
  • action 提交的是 mutation，而不是直接变更状态且可以包含任意异步操作（Action通过 store.dispatch 方法触发）

一幅图看清只能通过mutation修改state的原因

commit函数源码如下

 commit (_type, _payload, _options) {
  // check object-style commit
  const {
   type,
   payload,
   options
  } = unifyObjectStyle(_type, _payload, _options)

  const mutation = { type, payload }
  const entry = this._mutations[type]
  if (!entry) {
   if (process.env.NODE_ENV !== 'production') {
    console.error(`[vuex] unknown mutation type: ${type}`)
   }
   return
  }
  // 用来修改state
  this._withCommit(() => {
   entry.forEach(function commitIterator (handler) {
    handler(payload)
   })
  })
  this._subscribers.forEach(sub => sub(mutation, this.state))

  if (
   process.env.NODE_ENV !== 'production' &&
   options && options.silent
  ) {
   console.warn(
    `[vuex] mutation type: ${type}. Silent option has been removed. ` +
    'Use the filter functionality in the vue-devtools'
   )
  }
 }

this._withCommit来修改state，其源代码如下

_withCommit (fn) {
 const committing = this._committing
 this._committing = true
 fn()
 this._committing = committing
}

其中_withCommit函数的参数fn是修改state的函数，在执行fn函数前，将this._committing置为true,理由是在源代码的251行resetStoreVM函数中判断严格模式的代码，如下：

if (store.strict) {
 enableStrictMode(store)
}

当 vuex设置为严格模式， 执行enableStrictMode函数， 源码如下：

function enableStrictMode (store) {
 // $watch 函数来观察 state的变化
 store._vm.$watch(function () { return this._data.$$state }, () => {
 // tate变化时,调用 assert函数
 if (process.env.NODE_ENV !== 'production') {
 // 判断 store._committing
  assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
 }
 }, { deep: true, sync: true })
}

当store._committing（this._committing）不为true，就会报出异常。
所以，当不是触发mutation来修改state， 就不会执行commit函数，也不会执行_withcommit函数，this._committing = true不会执行，当执行 enableStrictMode 时，会执行 assert 函数，这时store._committing为false，就会报出异常。

回归标题action可以修改state吗

不开启严格模式的情况下可以，但是不提倡。

综上所述，经测试得知可以修改并修改成功，但是严格模式下控制台会抛异常且action是异步的，不方便DevTool 调试

结语

我们开发要严格按照官方文档开发，避免不必要的错误产生。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue中使用vuex,修改state的值示例

    1. 安装 vuex npm install vuex -S 2.在目录下创建store文件 3. 在store.js编辑一个修改state的方法 然后在mian.js中全局引入 最后在组件中使用 这个的功能是运用mutations 修改state中的值 以上这篇在vue中使用vuex,修改state的值示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vuex中的Mutations的具体使用方法

    在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离. Mutations使用 Vuex 中的 mutations 非常类似于事件,每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似.先注册事件,当触发响

  • 在Vuex中Mutations修改状态操作

    上篇是读取state,这篇是修改状态.即如何操作Mutations. 一. $store.commit( ) Vuex提供了commit方法来修改状态 1.store.js文件 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } } 2.在button上的修改方法 <button @click="$store.commit('add')">+</button>

  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:

  • 浅谈vuex为什么不建议在action中修改state

    背景 在最近的一次需求开发过程中,有再次使用到Vuex,在状态更新这一方面,我始终遵循着官方的"叮嘱",谨记"一定不要在action中修改state,而是要在mutation中修改":于是我不禁产生了一个疑问:Vuex为什么要给出这个限制,它是基于什么原因呢?带着这个疑问我查看Vuex的源码,下面请大家跟着我的脚步,来一起揭开这个问题的面纱. 一起阅读源码吧~ 1.首先我们可以在src/store.js这个文件的Store类中找到下面这段代码 // ... this

  • VUEX-action可以修改state吗

    VUEX-action可以修改state吗

    首先回顾下vuex,官网图如下 Vuex 的 store 中的状态的唯一方法是提交 mutation(mutation类似于事件且必须是同步函数) action 提交的是 mutation,而不是直接变更状态且可以包含任意异步操作(Action通过 store.dispatch 方法触发) 一幅图看清只能通过mutation修改state的原因 commit函数源码如下 commit (_type, _payload, _options) { // check object-style comm

  • Vuex 使用 v-model 配合 state的方法

    v-model 最好用的就是配合 data 達成 Two-way Binding,但若使用 Vuex 之後,是否還能使用 v-model 搭配 state 繼續 Two-way Binding 呢 ? Version Vue 2.5.17 Vuex 3.0.1 V-model vs. Data HelloWorld.vue <template> <div> <div> <input type="text" v-model="name&

  • vue-vuex中使用commit提交mutation来修改state的方法详解

    在vuex中,关于修改state的方式,需要commit提交mutation.官方文档中有这么一句话: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. 为了搞清楚其原因,查阅了很多资料,发现其它人在做vuex的源码解析的时候,并没有将这点说的很明白. 所以只好自己去查看vuex的源码,并且自己做demo进行验证. 但是试验后,发现直接修改state时,store中的state能够改变,并且是响应式的,并没有报错.跟commit提交mutation的方式没啥区别. 后

  • vuex actions异步修改状态的实例详解

    actions异步修改状态与mutations同步修改状态是两个容易混淆的概念,因为两者在执行上,很难测试出两者的差别,而我们要区别它们两,首先你得区分同步与异步,我的理解是,同步更像是一条流水线作业,而异步则更像是多条,例子你比如打电话,我们通常是我打给我妈,打完之后,再跟我爸打,而异步更像是某聊天工具,你既可以跟你爸聊,又可以跟你妈聊,你跟你妈聊可以在你爸的后面,也可以在他前面,你爸也是 而actions与mutations的区别就在此,mutations是你进行用百度钱包买一件商品时,你必

  • 使用vuex解决刷新页面state数据消失的问题记录

    在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. 言而总之: 实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该

  • vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法

    在store.js里面添加如下的代码就可以了: // 热重载 if (module.hot) { // 指定要监控的文件 module.hot.accept(['./mutations'], () => { const mutations = require('./mutations').default // Vuex 提供的热重载接口 store.hotUpdate({ mutations }) }) } 以上这篇vue-cli整合vuex的时候,修改actions和mutations,实现热

  • vue和react中props变化后如何修改state

    vue和react中props变化后如何修改state

    目录 vue和react中props变化后修改state 改进 react改变state必须知道的知识点 1.不能直接修改state 2.state的更新是异步的 3.state的更新是一个合并的过程 state与不可变对象 vue和react中props变化后修改state 如果只想在 state 更改时重新计算某些数据,比如搜索框案例. vue <template> <div> <input type="text" v-model="filt

随机推荐