vue插件之vuex

1、vuex流程图

当有组件更新时,会触发vuex数据中心,数据中心再将更新的反馈到其他关联的组件,模块间共享状态。图中绿框内是vuex的操作内容


vue插件之vuex_第1张图片

2、vuex状态管理(实例)

先导入vuex

应用级的状态集中放在store中; 
改变状态的方式是提交mutations,这是个同步的事物; 
异步逻辑应该封装在action中。


const vuex_store = new Vuex.store({
    state:{
        xxx:oooo; // 定义你的数据源
    }
}) 

用this.$store.commit(xxx)调用mutations

vue插件之vuex_第2张图片


加上action,调用dispatch也可以实现同样的效果,context指这整个store。如果有异步请求,则放到action里

vue插件之vuex_第3张图片



getter获取也可以

vue插件之vuex_第4张图片

vue插件之vuex_第5张图片


你可能感兴趣的:(vue)