vuex 是为了解决复杂项目组件之间的数据通信的一个全局状态管理机制,相信很多人都听说过这个东西。有部分人还没有在项目中使用Vuex
管理过数据状态,实际上Vuex
的起步使用非常之简单,看完本文之后,赶紧在项目中用起来吧!
1. 安装 Vuex 包
1 | npm install vuex --save |
2. 新建一个store.js
文件:
Vuex 必需的内容都在下面这个文件中,文件中做了详细的注释,注意其中的异步操作actions
和同步操作mutations
。
1 | // store.js |
3. 引入到main.js
入口文件中 - 最后一步
这是最后一步了,做完这步,然后我们就可以在项目中使用Vuex
了。
1 | // main.js |
在组件中使用 vuex:
在组件中的使用如下,省略了template
部分:
1 | // 组件中 |
在 js 文件中使用 vuex:
使用方式是一样的,只是调用的名字,稍微有些改变。
重复引用问题:
现在项目中基本使用的都是Webpack打包,所以我们不用担心重复引用的问题。
webpack会记忆你之前有没有引用过这个文件/包,整个项目只会引用一次。
1 | // some.js |
小结
实际上使用 Vuex 只需要store.js
文件,然后再把文件引到main.js
入门文件中,挂在new Vue
的配置项中即可使用。
如此之简单,快点来试试吧!
Vuex 文档:
这是一个简单的示例,更多内容请阅读vuex 文档
鼓励我一下:
觉得还不错的话,给我的项目点个star吧