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


Posted in Javascript onDecember 04, 2018

通过购物车的一个案列,把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文件

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

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,获取数据,方法。

<template>
 <div class="hello">
  <ul class="shop_container">
   <li v-for="item in $store.state.goods" :key="item.id" class="shop_container_li">

    <div class="shop_img">

     <img :src="item.img" alt="" width="100%" height="100%"/>

    </div>

    <div class="shop_detail">

     <p>{{item.name}}</p>

     <p>{{item.hint}}</p>

     <p>¥{{item.price}}</p>

     <p>

      <span class="shop_reduce" @click="reduce_num(item.id)">-</span>

      <span class="shop_num">{{item.num}}</span>

      <span class="shop_add" @click="add_num(item.id)">+</span>

     </p>

    </div>

   </li>

  </ul>

  <div class="foot">

   <div class="total_price">

    <span>合计:¥{{totalPrice}}</span>

   </div>

   <div class="total_num" :class="{payment: totalNum}">

    <span>去结账:{{totalNum}}</span>

   </div>

  </div>

 </div>

</template>

<script>

import {mapState, mapMutations, mapGetters} from 'vuex'

export default {

 name: 'HelloWorld',

 data () {

  return {

  }

 },

 created () {

  // console.log(this.goods)

  // console.log(this.goods_obj)

  // console.log(this.goods_length)

  // console.log(this.$store.state.shop) // 模块化 Vuex允许我们将 store 分割成模块(module)每个模块拥有自己的 state、mutation、action、getter、

 },

 computed: {

  ...mapState([

  // 获取state中的数据可以通过mapState辅助函数获取,也可以直接获取 例:this.$store.state.goods

   'goods', 'totalPrice', 'totalNum'

  ]),

  ...mapGetters([

   'goods_obj', 'goods_length'

  ])

 },

 methods: {

  ...mapMutations([

  // 获取mutation中的方法可以通过mapMutations 辅助函数获取,也可以直接获取。

   'ADD_CART'

   // 'REDUCE_CART'

  ]),

  reduce_num (id) {

   // this.REDUCE_CART(id)

   this.$store.commit('REDUCE_CART', id) //也可以直接获取

  },

  add_num (id) {

   this.ADD_CART(id) //通过mapMutations 辅助函数获取

  }

 }

}
</script>

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

总结

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

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

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

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

效果图预览

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
vue实现的双向数据绑定操作示例
Dec 04 #Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
vue实现的组件兄弟间通信功能示例
Dec 04 #Javascript
微信小程序模板template简单用法示例
Dec 04 #Javascript
vue项目刷新当前页面的三种方法
Dec 04 #Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 #Javascript
You might like
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
子页向父页传值示例
2013/11/27 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
js实现密码强度检验
2017/01/15 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python字典底层实现原理详解
2019/12/18 Python
提升python处理速度原理及方法实例
2019/12/25 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python如何根据时间序列数据作图
2020/05/12 Python
opencv 阈值分割的具体使用
2020/07/08 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
大学生职业生涯规划范文
2014/01/22 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
生物技术专业求职信
2014/06/10 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
2016年校长新年寄语
2015/08/17 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android