整理Vuex 的数据传递流程

最新推荐文章于 2025-04-03 08:00:00 发布

Why_so_serious_Y

最新推荐文章于 2025-04-03 08:00:00 发布

阅读量641

点赞数

文章标签：经验分享

本文链接：https://blog.youkuaiyun.com/Wy_so_serious/article/details/121192092

版权

本文详细介绍了在Vue.js中使用Vuex进行状态管理时，如何通过组件调用actions，然后由actions触发mutations来修改state数据的过程。遵循Vuex的单向数据流原则，通过dispatch、commit方法确保数据响应式更新，并保证错误可追溯。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

被问可以这么说：

当组件进行数据修改的时候我们需要调用 dispatch 来触发 actions 里面的方法。actions 里面的每个方法中都会有一个 commit 方法，当方法执行的时候会通过 commit 来触发 mutations 里面的方法进行数据的修改。 mutations 里面的每个函数都会有一个 state 参数，这样就可以在 mutations 里面进行 state 的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

数据传递流程个过程的代码详解：

1.如果组件中想要修改state中数据的值：

<template>
   <div class="hello">
        <h2>home</h2>
        <h3>{{this.$store.state.n}}</h3>
        <button @click="handleClick()">修改</button>
   </div>
</template>


你可能会想到在methods:{}中写handleClick函数修改，但这样是不行的。
原因：违反了vuex单向数据流的特点。 在当前组件中修改公共仓库state的值后，所有组件页面上的值都改变了，
                       

 如果程序出现错误，错误会无法捕获。
 所以要遵循vuex的特点数据传递流程进行修改。

2.components ----> actions

methods：{
  handleClick(){
    this.$store.dispatch("handleAdd")   //通过dispatch调用actions里的方法
                 }
               }
actions:{
  handleAdd(){
     console.log("actions里的方法被调用了")
                 }
               }

3.actions ---> mutations

actions:{
  handleAdd({commit}，params){     //第一个参数是个对象，解构赋值拿到对象中的commit；第二个参数是传递给mutations的参数
      commit("handlMutationseAdd")   //通过commit调用 mutations里的方法
  }
}
mutations:{
      handlMutationseAdd(state,params){     //vuex中state属性   params：commit触发时，传递过来的数据
      console.log("mutations被调用了",params)
      state.n++;
      console.log(state.n)  
      }                          
}
到此组件修改state中的数据完成，点击一次修改按钮n加1
接着页面上的数据重新进行了渲染----符合了vuex的特点数据是响应式的