仓库地址:https://github.com/dubuxunqi/vuexShoppingCar
先看下效果图
看下目录结构:
安装vue脚手架,还有布局就不在说了,主要讲vuex的用法
1.安装vuex依赖 npm install vuex --save
2.先是在src路径下创建一个vuex文件夹store,里面创建一个入口文件index.js。引入VUE、VUEX两大神器,然后在main.js里面引入一下,目的是让vuex在整个项目中都能访问到
index.js里面的代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import mutations from './mutations'
import actions from './actions'
import state from './states'
import getters from './getters'
export default new Vuex.Store({
mutations,
actions,
state,
getters
})
main.js的代码:
import store from './store/'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
3.在store文件夹中创建states.js,state是保存数据用的
export default{
arr:[]
}
4.在store文件夹中创建mutations.js,即mutation对象,它是更改store状态的唯一方法。点击列表页面的加入购物车,修改state对象里面的数据,并且修改的数据要提交到后台,但是mutation只能进行同步操作,所以得用action对象(后面介绍)
import state from './states'
export default{
addGoods(state,info){ //加入购物车的方法 参数state是state对象,info是addGoods调用时的参数,即传入加入购物车物品的对象
let isOwn = state.arr.some(function(item){
if(item.id == info.id){
item.num++;
return true;
}else{
return false;
}
});
if(!isOwn){
state.arr.push({id:info.id,name:info.name,price:info.price,num:1});
}
},
addNum(state,index){ //购物车中增加物品数量
state.arr[index].num++;
},
reduceNum(state,index){ //购物车中减少物品数量
if(state.arr[index].num == 0){
state.arr.splice(index,1);
}else{
state.arr[index].num--;
}
},
deleteGoods(state,index){ //购物车中删除物品
state.arr.splice(index,1);
}
}
5.在store文件夹中创建actions.js,即action对象,Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。(下面的例子不涉及异步操作,如果想要测试,自己加上setimeout测试下)
export default{
addGoods({commit},params){ //params对应mutation对象中参数info
commit('addGoods',params);
},
addNum({commit},params){
commit('addNum',params);
},
reduceNum({commit},params){
commit('reduceNum',params);
},
deleteGoods({commit},params){
commit('deleteGoods',params);
}
}
6.在store文件夹中创建getters.js,即getter对象,getter对象可以处理state的数据,或是过滤
import state from './states'
export default{
totalMoney(state){
let money = 0; // 计算总价
for(let i =0;i<state.arr.length;i++){
money += parseInt(state.arr[i].price.substring(1))*state.arr[i].num;
}
return money;
}
}
7.list.vue里面的代码
js代码
import {mapActions} from 'vuex' //引入action对象
export default{
name:"List",
data(){
return {
arr:[
{id:22,name:"小炒肉",price:"¥25.00"},
{id:13,name:"皮蛋瘦肉粥",price:"¥13.00"},
{id:36,name:"凉皮",price:"¥15.00"},
{id:19,name:"肉夹馍",price:"¥10.00"},
{id:28,name:"干锅鸭头",price:"¥205.00"},
]
}
},
methods:{
...mapActions(['addGoods']) //使用action对象中addGoods方法
}
}
8.car.vue代码
js代码
import {mapState,mapActions,mapGetters} from 'vuex' //引入state,action,getter对象
export default{
name:"Car",
data(){
return {
}
},
methods:{
...mapActions(['addNum','reduceNum','deleteGoods'])
},
computed:{
...mapGetters(['totalMoney']),//在计算属性里面使用getter和state对象
...mapState(['arr'])
}
}
如果有什么问题,尽管拍砖,虚心接受,有什么问题也可以给我留言