vuex官方流程图解释

兜里揣着星星

于 2021-06-14 16:26:03 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/MCCLS/article/details/117906656

这篇博客详细介绍了Vuex的状态管理流程，从组件调用actions开始，通过dispatch异步派发mutations，接着mutations负责安全地改变state，而state的更新会即时反映到组件上。整个过程确保了数据流的单向性和状态的响应式更新。Vuex是Vue.js应用的集中式状态管理库，通过定义state、getters、mutations和actions来组织应用的状态。

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

大致说明：

1.从组件出发

2.从组件（call）调用了actions，和后台去交互一些数据

3.actions，dispatch（异步派发）mutations；

4.mutations去触发了状态state的改变

5.state去更新了components；

3，4，5这三步加起来就是vuex

注意：

1.数据流是单向

2.组件能够调用actions

3.actions可以派发mutations

4.只有mutations可以改变state；

5.state是响应式的，只要state被更新，那么组件将同步更新；


    const store=new Vuex.Store({
    state:{
        //这里存放状态，其实就是数据
    },
    getter:{
        //state的计算属性
        //从state中获得的数据
    },
    mutations:{
        //一些更新state的逻辑
    },
    actions:{
        //出发mutations
    }
    })