用vue 2.0 vuex实现锤子商城简单功能（添加，删除，详情，地址，订单，支付。。。。）

本文链接：https://blog.youkuaiyun.com/pengpeng9512/article/details/102584634

近期的一个小练习，关于熟悉Vuex有很大帮助，总计花了近3天时间完成。总结一下思路和遇到的一些问题及解决办法

在这里插入图片描述
效果
———————————————————————————————————————————————

整体思路

当我拿到这个练习的时候，第一步首先确认整体项目中有哪些功能，然后把数据整体看一下，再然后…呃我也不知道琢磨了多长时间。

第一步，准备工作

下载vue-cli

vue init webpack 项目名

下载Axios

cnpm install axios -S

配置main.js

import Vue from 'vue' 
import App from './App'
import router from './router'
import store from '@/components/store/index'
import axios from 'axios'
Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

第二步，我对这个小项目做了一个大概的思路图

在这里插入图片描述

(*￣︶￣)开始写项目

首先需要拿到数据，
对接口的渲染我是在根目录的App.vue中实现的。

created() {
    this.$axios.get("../../static/goods_list.json").then(v => {
      // console.log(v);
      this.$store.commit("datas", v.data);
      this.$store.commit("backgroundcolor");
    });
    this.$store.commit('storage')
  },
  //在App.vue中，使用生命周期对接口进行访问

在App.vue中使用生命周期，created访问接口，得到数据，通过在Vuex的库中创建一个新数组，得到数据以后，通过方法传到库中并赋值给刚刚创建的新数组中。
得到数据后开始渲染，正常从库里使用。整体的样式应该就不用细说了吧O(∩_∩)O哈哈~偷个懒

第三，完成渲染后

做一个路由的配置，用来跳转页面。


import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Listbox
    }
     ]
})

第四，传值传参

这个项目的最重要的就是通过库进行传参和方法的调用，然后组件通过接收参数对数据进一步判断筛选，得到当前组件需要的数据
既然用到Vuex，我们的对库中数据的操作尽量放在Store中，切记不要在组件中操作库（Store）中的数据，因为可能会发生异步、数据未定义等等等等等…看着头皮发麻的报错。

在传值中的一些必须知道的东西

调用库中的数据----> this.$store.state.数据的名称


调用库中的方法----> this.$store.commit("方法名",传到库中的数据)
**在这里有一个小知识点，回传到库中的数据，我们可以以字符串、对象、以及data中定义的数据，
  如果传多个我们需要把他变成对象的形式传过去，例：{txt:"字符串",num:0,data:this.data}


在Store库中我们通过上面的方法名中接收回传的参数：
	方法名(state,data){
		如果回传的数据只有一条，我们通过data就拿到了，
		如果回传的是个对象，我就要通过 data.数据拿到
	}

第五，基本逻辑

刚才我说过，这个项目需要做的最多的就是传值，然后判断。

那么我在做的过程遇到的最明显容易出错的地方就是，怎么去判断一个很深层的数据中与另外一个很深层的数据比对呢？层层嵌套的数数据确实很头疼，在工作中遇到的时候，更是头皮发麻。

遇到这种问题的时候我一种的办法就是最原始的for循环，拿到想要判断的所有数据，然后判断。

 for (let i in state.list) {
                state.list[i].sku_info.forEach((v, index) => {

                    for (let i in v.spec_json) {
                        console.log(v.sku_id, data.data.sku_id)
                        // console.log()

                        if (v.sku_id == data.data.sku_id) {

                            let a = state.cartList.findIndex((val, index) => {
                                return val == v
                            })
                            // console.log(a)
                            if (a === -1) {

                                state.cartList.push(v)
                                v.image = data.num
                            }
                            if (a !== -1) {
                                v.image += data.num
                                if (state.cartList[a].image < 5) {
                                    state.cartList[a].image + 1
                                } else {
                                    state.cartList[a].image = 5
                                    alert("一件商品只能购买五个")
                                }
                            }
                        }

                    }
                })

            }