Vuex使用笔记
Vue-cli虽然好用,但是各个模块之间、各个页面之间的数据传递非常繁琐。所以才有了这个Vuex模块,用来管理Vue项目中的全局变量。既然都有全局变量了,谁还要局部变量呢?
这篇笔记本着够用就行,能用就行的宗旨,尽量以最少学习代价在实战项目中使用Vuex。
Ps:文中漏洞百出,还请各位批判阅读。
第一步 安装
npm包层面
1 | $ npm i vuex -S |
良好的目录结构
为了有一个良好的目录结构,防止被同事打死方便维护,新建目录结构(加星号部分)
1 | / |
src/store
用来存放所有的全局变量相关文件src/store/index.js
用来引入vuex模块并导入所有的全局变量模块src/store/modules
用来存放所有的全局变量模块src/store/modules/<modelsName>.js
一个全局变量模块
引入
修改 src/main.js
添加
1 | import store from './store'; // 引入全局变量组件 |
src/store/index.js
1 | import Vue from 'vue' |
全局变量模块化的用处是防止变量重名,并且可以明确所属关系。
src/store/modules/<modelsName>.js
1 | export default { |
第二步 使用
现在你已经基本完成了整个全局变量的框架建构,现在可以开始滥用使用了。
关于各种方法的使用请参照上面的文件,这边就简单写一下数据的使用吧。
this可以取到data的地方
1 | that.$store.state.<modelsName>.nick_name |
模板渲染的地方
1 | {{$store.state.<modelsName>.nick_name}} |
后记
基本上这样就可以足够应付大多数的情况了。另外Vuex还有很多的好用的功能(虽然我没用过)。
更多信息请看Vuex 是什么?