vue收录

6-Vuex流程

2019-06-19  本文已影响200人  梦想成为小仙女

这里主要理解Vuex是实现数据共享的单例模式,当一个组件修改state时,其它组件显示的state也会变化,解决了Vue数据单向传输的问题,当一个组件修改state时,由于单向传输的特性,state并没有改变

一.使用流程

1 安装vuex
npm i vuex -S
2 文件目录
3 结构文件(index.js)

一般是从服务器获取的json对象

image.png

5 统一变量名(mutations-type.js)
由于会在actions中调用mutations中的方法,所以会将mutations中的方法名在mutations-type文件中统一管理


image.png

6 操作数据文件(mutations.js)

7 修改数据文件(action)

image.png

8 将state中的数据渲染到view上(getters)


image.png

从组件修改state的流程,可以看出一个组件修改,所有都会变化

9 组件调用actions方法(navbar组件中的created方法)


image.png

10 在main.js中导入vuex并注册


image.png
上一篇 下一篇

猜你喜欢

热点阅读