我爱编程

Vuex--状态管理(单向数据流)

2018-05-25  本文已影响0人  苦茶_12138

Vuex的总体流程图

图一   流程图

第一步:安装  npm   install  vuex  --save

第二步:在components文件夹下,创建vuex文件夹,创建componentA和componentB两个组件

第三步:在src文件夹下,创建store文件夹,index.js文件,里面专门存放vuex相关逻辑

第四步:main.js里面引入,store文件夹,实例化store对象

图二  main.js

第五步:在App.vue里引入componentA,componentB组件,注册,在html里显示

图三    App.vue

第六步:配置componentA, A组件主要是用了同步的方法传值

图四   componentA

第七步,配置componentB, B组件主要是用了异步的方法传值

图五   componentB

最后,配置store/index.js里面的方法

图六    store/index.js

备注:上面写的东西,不需要刻意按照一步一步来,能实现功能就行

上一篇 下一篇

猜你喜欢

热点阅读