vuex-cart 介绍

使用vue2 + vuex + vue-cli + localStorage + less，实现本地储存的购物车。

vuex-cart 介绍

安装

1	git clone https:

1	cd sls-vuex

1	npm install

1	npm run dev

开始

为了熟悉vuex，做了一个小小的尝试。关于vue-cli和vuex的安装就不表了。将购物车划分为三个组件模块，分别是商品信息、购物车信息及总计信息。而商品信息中可能关于几个状态，增加、添加、删除单项、清空购物车等。使用vuex进行状态管理有利于维护。

在vuex中使用这样的方式进行管理：

[ vuex-cart 介绍 ]

组件调用actions，异步分发到mutation修改state，经过getters处理过后更新到各组件中，state通过localStorage储存数据到本地。

该项目的文件结构：

.
├── build                           
├── ......
├── src                         
│   ├── store    
│   │   └── index.js
│   │   └── cart
│   │     └── action.js
│   │     └── getters.js
│   │     └── mutation_types.js
│   │     └── mutation.js
│   │     └── state.js
│   │     └── index.js
│   ├── components              
│   │   └── cart.vue 
│   │   └── info.vue
│   │   └── list.vue
│   └── main.js                     
.

状态管理

举例关于vuex状态管理的一个具体流程。当点击商品信息中的添加按钮时，actions分发到mutations中。在此之前，需在购物车中记录下各菜品的索引，这样才可以对各组数据进行相应操作。针对当前点击项state是否已经经过初始化，分为两个mutations分发。

123456789101112

methods: {    add_db(items) {        //在购物车中记录当前选项的curIndex，如果能找到索引值，则进入(A)，否则进入(B)并且赋值属性到原始数据中，将其初始化        this.$store.dispatch('check_db',items.id)        if(){            //...this.$store.dispatch('add_db',items.id) (A)        }else {            //...this.$set(data.dataList,num,1)            //...this.$store.dispatch('create_db',items) (B)        }    }}

触发了action之后，在store/cart/actions中注册这两个action，接收相应的参数。

export default {    check_db: ({commit},id) => commit('CHECK_DB',id),    add_db: ({commit},id) => commit('ADD_DB',id),    create_db : ({commit},obj) => commit('CREATE_DB',obj)}

所以要注册相关的mutation

12345678910111213141516171819202122232425262728293031

export default {    /**        (一) 检查能否在购物车数据中找到该项并且将其索引值初始化    */    CHECK_DB(state,id) {        state.curIndex = -1        let list = state.cartList//购物车数据        if(list.length) {            for(let i = 0;i<list.length;i++){大专栏  vuex-cart 介绍ss="line">                if(list[i].id === id){                    state.curIndex = i                    break                }            }            }    },    /**        (二) 购物车中已找到此项，将其对应num增加，并且把数据储存在localStorage中    */    ADD_DB(state,id) {        state.cartList[state.curIndex].num = parseInt(state.cartList[state.curIndex].num)        state.cartList[state.curIndex].num++        localStorage.setItem('vuex_cart',JSON.stringify(state.cartList))    },    /**        (三) 购物车中没有找到此项，将该项的数据储存在购物车中    */    CREATE_DB(state,obj) {        state.cartList.push(obj)    }}

通过mutation修改了state，所以state.js中保留了所有关于菜品数据的内容

123456789101112131415

export default {    /**        1) 索引值        2) 总数量及总价格        3) 购物车数据    */    curIndex: -1,    cartInfos: {        total_nums: 0,        total_price: 0    },    cartList: localStorage.getItem('vuex_cart') ?               JSON.parse(localStorage.getItem('vuex_cart')) :     []}

而组件中要获得state里的数据，就需要相关的getters

export default {    getCartList(state) {        return state.cartList    }}

而把state、getters、mutation、getters组合起来形成一个index.js文件输出，组成一个module。即为store的模块化。

1234567891011121314

/**    store/cart/index.js*/import state from './state'import getters from './getters.js'import actions from './action'import mutations from './mutations'export default{	state,	getters,	actions,	mutations	}

在store/index.js中创建一个store对象存放modules

1234567891011

import Vue from 'vue'import Vuex from 'vuex'import cart from './cart/'Vue.use(Vuex)export default new Vuex.Store({    modules: {        cart    }})

完整的代码在这里

vuex-cart在线预览

vuex-cart 介绍

安装

开始

状态管理

相关推荐