用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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
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
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
浅谈node的事件机制
2017/10/09 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python 计算文件的md5值实例
2017/01/13 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
浅谈Python 递归算法指归
2019/08/22 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
毕业自我鉴定
2013/11/05 职场文书
家长对孩子的感言
2014/03/10 职场文书
春节晚会主持词
2014/03/24 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL