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

用vuex写了一个购物车H5页面的示例代码：https://www.jb51.net/article/152008.htm

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

# 全局安装 vue-cli   $ npm install --global vue-cli   # 创建一个基于 webpack 模板的新项目   $ vue init webpack my-project   # 安装依赖，走你   $ cd my-project   $ npm install   $ npm run dev

安装vuex

?

1	npm install --save vuex

对vuex进行配置

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

import store from './store'   new Vue({    el: '#app',    store, //将store暴露出来    components: { App },    template: '<App/>'   })

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

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 一目了然。

?

1 2 3 4 5

// 使用常量，这是mutation-type.js文件   export const ADD_CART = 'ADD_CART'   export const REDUCE_CART = 'REDUCE_CART'

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

// 这是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数据派生出一些状态，例如需要知道商品的个数

?

1 2 3 4 5 6 7 8

const getters = {    goods_obj: state => state.goods,    goods_length: state => state.goods.length   } export default getters

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

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

效果图预览

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