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

时间：2021-08-28 来源：互联网编辑：宝哥软件园浏览：次

通过购物车里的一个案例，我从vuex身上吸取了教训。

关于vuex的概念

Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中式存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随着相应的规则而变化。简单来说，就是数据共享，集中数据进行统一管理。如果你的应用足够简单，最好不要用Vuex。一辆简单的全球活动巴士就足够了。但是，如果需要构建一个中大型的单页应用程序，很可能会考虑如何更好地管理组件外的状态，Vuex将成为自然的选择。

这些是核心概念

状态

Vuex使用单一状态树——。是的，一个对象包含所有应用程序级别的状态，并且所需的数据写在这里，类似于数据。

吸气剂

有时我们需要从存储中的状态派生一些状态，并使用类似于computed的Getter。

变化

改变Vuex商店状态的唯一方法类似于方法。

行动

Action提交突变而不是直接改变状态，可以包含任何异步操作。这里主要操作异步操作，和突变方法差不多，和方法类似。

组件

当应用程序变得非常复杂时，存储对象可能会变得非常臃肿。Vuex允许我们将商店分成模块。每个模块都有自己的状态、突变、动作、getter甚至嵌套子模块。

状态管理

首先，您需要创建一个Vue项目

#全局安装vue-CLI $ npminstall-全局vue-CLI #基于webpack模板创建新项目$ vue init webpack my-project#安装依赖项，转到$ CD my-project $ npminstall $ npmrundev安装vuex。

Npm安装-保存vuex以配置vuex

1.创建存储文件夹2。在store文件夹下创建一系列js文件，如图所示

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

从“”导入存储。/store' newvue ({el:' # app '，store，//expose store components 3360 { app }，template:' app/'}) 4。将待存储的数据写入state对象，并将状态存储在index.js文件中。

从“vue”导入Vue从“vuex”导入Vuex从“导入突变”。/突变“从导入操作”。/actions“从导入getters”。/Gatters“从商店导入”。/modules/shop ' vue . use(vuex)const state={ goods : [{ id 3360 ' 0 '，name:' vivo-x20plus屏幕指纹版'，hint: '背光也清晰。'照亮你的美丽'，价格： 3596.00，num : 0，img : require('./assets/v.jpg')}，{id :' 1 '，name 3360' Huawei mate10Plus '，hint: '真正的人工智能芯片' Price : 4999.00，num : 0 0，img : require('./assets/h.jpeg')}，{id :' 2 '，名称：' Huawei mate 10 plus '，提示3360 '真正的人工智能芯片'，价格： 4999.00，num 3360 0 0，img: require('./assets/v.jpg') } ]，totalPrice: 0.00，totalNum: 0 }导出默认新Vuex。商店({ state，Variations，actions，getters，modules : { shop//shop module } })5。在突变. js文件中编写改变状态原始数据的方法，可以用常量代替突变事件类型。你可以使用常量。它可以让你的代码伙伴一目了然地看到整个应用程序中包含的突变。

//使用常量，这是突变-type.js文件导出const add _ cart=' add _ cart '导出const REDUCE _ CART=' REDUCE _ CART '/这是突变. js文件导入{ADD_CART，REDUCE_CART} from '。/variation-types . js ' export default {[ADD _ CART](state，id) { state.goods[id]。num state . TotalNum state . TotalPrice=state . goods[id]。price//console . log(state . total price)}，[REDUCE_CART] (state，Id) {if (state)。商品[id]。num0) {state。商品[id]。数字状态。totalnum-state。totalprice-=state。商品[id]。价格}}} 6。从状态数据中导出一些状态，例如知道货物的数量。

const getter s={ goods _ obj : state=state。商品，商品_长度：状态=状态。商品。长度}导出默认getters7 .使用vuex，获取数据，方法。

模板div class=' hello ' ul class=' shop _ container ' Li v-for=' $ store中的项目。国家。商品' :键='项。id ' class=' shop _ container _ Li ' div class=' shop _ img ' img : src=' http : item。img ' alt=' width=' 100% ' height=' 100% '//div class=' shop _ detail ' p { { item。name } }/p { { item } .合计：{ { TotalPrice } }/span/div class=' total _ num ' : class=' { payment : TotalNum } ' span去结账：{ { TotalNum } }/span/div/div/template script import { MapState，mapGetters，mapGetters}从vuex '导出默认{ name: 'HelloWorld '，data(){ return } }，created(){//console。日志(这个。货)//控制台。日志(这个。goods _ obj)//控制台。日志(这个。goods _ length)//控制台。日志(这个.$store.state.shop) //模块化状态管理允许我们将商店分割成模块（模块)每个模块拥有自己的状态、突变、动作、吸气、},计算出.mapState([ //获取状态中的数据可以通过mapState辅助函数获取，也可以直接获取例：这个$store.state.goods 'goods '，' totalPrice '，' totalNum' ])，mapgetter([' goods _ obj '，' goods_length' ]) }，methods: {.映射突变([ //获取变化中的方法可以通过地图突变辅助函数获取，也可以直接获取. 'ADD _ CART '//' READ _ CART '])，READ _ num(id){//这个.减少_购物车(id)这个$store.commit('REDUCE_CART '，id) //也可以直接获取}，add_num (id) { this .ADD_CART(id) //通过地图突变辅助函数获取} }}/script8 .假如数据过多，复杂，可以进行模块化来开发，可以将上述的状态、突变、动作等可以同时写在shop.js文件中，此时商店就是一个模块了。

总结

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

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

开源代码库地址：https://github。com/flym 1013/vuex演示

效果预览地址：https://flym 1013 . github . io/vuexDemoBuild/

效果图预览