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

站长资源 2025/2/23 佚名

34 1538 34

DDR爱好者之家 Design By 杰米

通过购物车的一个案列，把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项目

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

安装vuex

npm install --save vuex

对vuex进行配置

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

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

import store from './store'

new Vue({

 el: '#app',

 store, //将store暴露出来

 components: { App },

 template: '<App/>'

})

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

import Vue from 'vue'

import Vuex from 'vuex'

import mutations from './mutations'

import actions from './actions'

import getters from './getters'

import shop from './modules/shop'

Vue.use(Vuex)

const state = {

 goods: [

  {

   id: '0',

   name: 'vivo-X20Plus屏幕指纹版',

   hint: '逆光也清晰，照亮你的美',

   price: 3596.00,

   num: 0,

   img: require('../assets/v.jpg')

  },

  {

   id: '1',

   name: '华为mate10Plus',

   hint: '真正的人工智能芯片',

   price: 4999.00,

   num: 0,

   img: require('../assets/h.jpeg')

  },

  {

   id: '2',

   name: '华为mate10Plus',

   hint: '真正的人工智能芯片',

   price: 4999.00,

   num: 0,

   img: require('../assets/v.jpg')

  }

 ],

 totalPrice: 0.00,

 totalNum: 0

}

export default new Vuex.Store({

 state,

 mutations,

 actions,

 getters,

 modules: {

  shop //shop模块

 }
})

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

// 使用常量，这是mutation-type.js文件

export const ADD_CART = 'ADD_CART'

export const REDUCE_CART = 'REDUCE_CART'

// 这是mutation.js文件

import {

 ADD_CART,

 REDUCE_CART

} from './mutation-types.js'

export default {

 [ADD_CART] (state, id) {

  state.goods[id].num++

  state.totalNum++

  state.totalPrice += state.goods[id].price

  // console.log(state.totalPrice)

 },

 [REDUCE_CART] (state, id) {

  if (state.goods[id].num > 0) {

   state.goods[id].num--

   state.totalNum--

   state.totalPrice -= state.goods[id].price

  }

 }

}

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

const getters = {

 goods_obj: state => state.goods,

 goods_length: state => state.goods.length

}
export default getters

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

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

总结

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

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

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

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

效果图预览

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vuex,购物车H5页面,vuex,购物车

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年02月23日

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

vue自定义指令的创建和使用方法实例分析

vue实现的双向数据绑定操作示例

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接