用vuex写了一个购物车H5页面的示例代码

原创 黎云锐 教程 前端 247阅读 2018-12-31 16:10:33 举报

通过购物车的一个案列,把vuex学习了一篇。
vuex概念浅谈
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单的来说,就是数据共用,对数据集中起来进行统一的管理。
如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
核心概念主要有这些

State

Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态,将所需要的数据写放这里,类似于data。

Getter

有时候我们需要从 store 中的 state 中派生出一些状态,使用Getter,类似于computed。

Mutation

更改 Vuex 的 store 中的状态的唯一方法,类似methods。

Action

Action 提交的是 mutation,而不是直接变更状态,可以包含任意异步操作,这里主要是操作异步操作的,使用起来几乎和mutations方法一模一样,类似methods。

Module

当应用变得非常复杂时,store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

vuex
首先需要创建一个Vue项目

安装vuex

对vuex进行配置

1.创建一个store文件夹
2.在store文件夹下创建如图的一系列js文件

3.在main.js文件中引入上面创建的store.js

4.将要存放的数据写在state对象中,state则存写在index.js文件中。

5.将改变state原始数据的方法写在mutation.js文件中,可以使用常量替代 Mutation 事件类型,用不用常量取决于你——在需要多人协作的大型项目中,这会很有帮助。可以让你的代码合作者对整个 app 包含的 mutation 一目了然

6.对state数据派生出一些状态,例如需要知道商品的个数

7.使用vuex,获取数据,方法。

8.假如数据过多,复杂,可以进行模块化来开发,可以将上述的state,mutation,action等可以同时写在shop.js文件中,此时shop就是一个模块了。

总结

若数据不是很多,也不复杂,我们也可以在构造vue实例data中存放我们所需要的共用数据。一旦数据较多,复杂,vuex是一个非常不错的选择,对于状态管理。

努力学习中,希望能和大神一起。

github地址:https://github.com/flym1013/vuexDemo

效果预览地址: https://flym1013.github.io/vuexDemoBuild/

效果图预览

为了学习工作与休闲娱乐互不冲突,现新建圈【码农茶水铺】用于程序员生活,爱好,交友,求职招聘,吐槽等话题交流,希望各位大神工作之余到茶水铺来喝茶聊天。群号:582735936

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复