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

效果图预览

这里写图片描述
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 使用说明-Vuex 安装 直接下载 / CDN 引用 Unpkg.com 提供了基于 NPM 的 CDN 链接。以...
    满是裂缝的花卷阅读 987评论 0 8
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,924评论 0 7
  • Vuex 概念篇 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式...
    Junting阅读 3,057评论 0 43
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 2,013评论 3 3
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,652评论 7 61