vuex官方流程图解释

最新推荐文章于 2025-10-10 16:40:24 发布

原创最新推荐文章于 2025-10-10 16:40:24 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

大致说明：

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
    }
    })