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

通过购物车的一个案列,把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,获取数据,方法。

<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/

效果图预览

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

(0)

相关推荐

  • Vue实现购物车功能

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> &l

  • Vuejs实现购物车功能

    开始更新前端框架Vue.JS的相关博客. 功能概述 学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码 代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY

  • 基于Vuejs实现购物车功能

    本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q

  • vuex实现的简单购物车功能示例

    本文实例讲述了vuex实现的简单购物车功能.分享给大家供大家参考,具体如下: 购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list/> </div> <h2>已选商品</h2> <div class="shop-cartbox"> &l

  • vue实现购物车小案例

    本文实例为大家分享了vue实现购物车小案例的具体代码,供大家参考,具体内容如下 最终效果 HTML部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shopcar.html</title> <script src="https://cdn.jsdelivr.net/npm/vue&q

  • 用vue和node写的简易购物车实现

    项目介绍 这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境 因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q

  • vue实现商城购物车功能

    本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下 首先,先上最终的效果图 效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=

  • vuejs手把手教你写一个完整的购物车实例代码

    由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=

  • Vue2.0实现购物车功能

    简介 vue.js是由华人尤雨溪开发的一套MVVM框架.vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于具有复杂交互逻辑的前端应用,如一些单页应用程序,有很多表单操作,页面中的内容需要根据用户的操作动态变化. 主要特性: 1.响应式的数据绑定  2.组件化开发  3.Virtual DOM 开发准备 工具 我使用的编辑器是sublime text3,首先要先安装个插件sublimeServer,用来搭建一个http服务器,使用详情请查看这篇博

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

随机推荐