最近在简单的学习了vue之后，通过实践去理解vue的用法和它的优点。
首先先简单介绍一下文件的目录
components是公共的组件,里面包含cart.vue(购物车)、product.vue(list.vue文件要用到的产品公用组件)、productDetail.vue(产品详情页面)
views文件是视图文件(就是list.vue主页文件)，libs下的utils是一些公共函数，router.js是路由配置文件,style.css是App.vue的样式文件(写在App.vue里也没关系)
一：首先在list.vue文件下需要循环显示商品信息,那么我就先介绍一下product.vue组件
重点在，这一个product组件就是一个链接，可以点击后查看此商品的详细信息所有我们直接设置一个router-link对于每个商品都会有一个自己的id，在路由的id我们就通过list.vue父组件传给它相对应的商品对象，这样顺理成章接下来的商品名称、价格等信息就直接可以在html获取到。同时，在每个商品组件有个添加到购物车的功能，因为用到vuex，所以，对于修改购物车里信息的，一律交给vuex去统一修改，因此在handleCart函数里用过commit提交给vuex中mutation里面的函数。具体代码如下：
<template>
<div class="product">
<router-link :to="'/productDetail/'+info.id" class="product-main">
<img :src="info.image">
<h4>{{info.name}}</h4>
<div class="product-color" :style="{background:colors[info.color]}"></div>
<div class="product-cost">￥ {{info.cost}}</div>
<div class="product-add-cart" @click.prevent="handleCart">加入购物车</div>
</router-link>
</div>
</template>
<script>
export default {
props:{
info:{
type:Object
}
},
methods:{
handleCart () {//添加到购物车
this.$store.commit('addCart',this.info.id);
}
},
data() {
return{
colors:{
'白色':'#ffffff',
'金色':'#dac272',
'蓝色':'#233472',
'红色':'#f2352e'
}
}
}
}
</script>二：list.vue 主页代码思路
１、前面我们已经提到，我们要循环显示商品，就要给product循环传商品对象，那么在list.vue中怎样去获取到所有的商品信息？其实，在vuex的管理下所有的数据都是由vuex去统一管理，包括数据的获取,因此只要通过计算属性去获取vuex中state中的productList数组即可(切记不可在data属性中获取，文章末尾会提到原因),那么现在循环显示商品的信息就解决了。
２、那么对商品的排序我们如何去实现，首先，就是排序类别的显示，在list.vue中我们是获取到全部的商品信息，由于商品颜色和品牌等信息有重复，那么我们就要排重，获得到所有的颜色和品牌类别，在这里既可以在list.vue组件中获取，又可以在vuex中获取(到底应该放在哪里，文章末尾后给出几条建议),对于功能实现，就是通过过滤返回过滤的商品数组即可，那么现在所有问题解决，看一下代码是如何实现功能
<template>
<div v-show="list.length">
<div class="list-control">
<div class="list-control-filter">
<span>品牌:</span>
<span
class="list-control-filter-item"
:class="{on:item === filterBrand}"
v-for="item in brands"
@click="handleFilterBrand(item)"
>{{item}}</span>
</div>
<div class="list-control-filter">
<span>颜色:</span>
<span
class="list-control-filter-item"
:class="{on:item === filterColor}"
v-for="item in colors"
@click="handleFilterColor(item)"
>{{item}}</span>
</div>
<div class="list-control-order">
<span>排序:</span>
<span
@click="handleDefault"
class="list-control-order-item"
:class="{on:order ===''}"
>默认</span>
<span
@click="handleOrderSales"
class="list-control-order-item"
:class="{on:order === 'sales'}"
>销售</span>
<span
@click="handleOrderByprice"
class="list-control-order-item"
:class="{on:order.indexOf('cost')>-1}">
价格
<template v-if="order === 'cost-desc'">↓</template>
<template v-if="order === 'cost-asc'">↑</template>
</span>
</div>
</div>
<Product v-for="item in filteredAndOrderedList" :info="item" :key="item.id"></Product>
<div v-if="!filteredAndOrderedList.length" class="product-not-found">
暂无相关商品
</div>
</div>
</template>
<script>
import Product from '../components/product.vue'
export default {
data() {
return{
order:'',
filterBrand:'',
filterColor:''
}
},
components:{
Product
},
computed:{
list() {
return this.$store.state.productList;
},
filteredAndOrderedList() {
let list = [...this.list];
if(this.filterBrand!==''){
list = list.filter(item => item.brand ===this.filterBrand);
}
if(this.filterColor !==''){
list = list.filter(item => item.color === this.filterColor);
}
if(this.order !== '') {
if(this.order ==='sales'){
list.sort((a,b) => {return b.sales-a.sales})
}else if(this.order === 'cost-desc'){
list.sort((a,b) => b.cost-a.cost)
}else if(this.order === 'cost-asc'){
list.sort((a,b) => a.cost-b.cost)
}
}
return list;
},
brands() {
return this.$store.getters.brands;
},
colors() {
return this.$store.getters.colors;
}
},
methods:{
handleDefault() {
this.order = ''
},
handleOrderSales () {
this.order = 'sales'
},
handleOrderByprice () {
if(this.order === 'cost-desc'){
this.order = 'cost-asc'
}else{
this.order ='cost-desc'
}
},
handleFilterBrand (brand) {
if(this.filterBrand === brand){
this.filterBrand = ''
}else{
this.filterBrand = brand
}
},
handleFilterColor (color) {
if(this.filterColor === color){
this.filterColor = ''
}else{
this.filterColor = color
}
}
},
mounted () {
this.$store.dispatch('getProductList');
}
}
</script>功能实现的主要思想就是，通过点击过滤条件的按钮时改变data中的数据，然后根据data里面的过滤条件分别通过filter函数过滤，最后返回过滤数据即可。
三：productDetail.vue 商品详情信息
现在直接看代码：
<template>
<div v-if="product">
<div class="product">
<div class="product-image">
<img :src="product.image">
</div>
<div class="product-info">
<h1 class="product-name">{{product.name}}</h1>
<div class="product-cost">￥{{product.cost}}</div>
<div
class="product-add-cart"
@click="handleClickAdd"
>加入购物车</div>
</div>
</div>
<div class="product-desc">
<img
v-for="n in 10"
:src="'http://ordfm6aah.bkt.clouddn.com/shop/'+n+'.jpeg'"
:key="n"
>
</div>
</div>
</template>
<script>
import product_data from '../project.js'
export default {
data () {
return {
id:parseInt(this.$route.params.id),
product:null
}
},
methods:{
getProduct () {
setTimeout(()=> {
this.product = product_data.find(item => item.id === this.id)
},500)
},
handleClickAdd () {
this.$store.commit('addCart',this.id);
}
},
mounted () {
this.getProduct();
}
}
</script>在这里有人会问，不是在vuex获取到了数据了吗？为什么还要在此组件获取数据(解释一下，获取数据没有直接用axios，而是模拟了异步获取数据)，这是因为，为了使业务组件逻辑更好的解耦，使他们彼此关系不那么密切(优点是便于维护)，在这里只通过路由里面的id再次获取相应的数据，这样，即使vuex里面的数据出错，维护productDetali.vue时只需要维护路由里面的id即可;但是修改数据还是要在vuex中进行
个人的总结：
１、数组的排重
我们首先想到的是循环里面套循环，但是这样做的话效率会慢很多，所以我么怎样在一个循环中处理好呢？可以申请一个空对象作为参照，当访问过时，在这个对象添加key为循环出的值，对象值设为1,表示我已经读取过了，那么判断条件也就自然而然为对象对应key的值是不是１,是的话继续下一个循环，不是那么就push到新创建的数组中,并且在对象中push值为１的对象表示读过了，最后将数组返回。是不是觉得这个思想很６？
const common = {
getFilterArray(array) {//数组排重
let res = [];
let josn = {};
for(let i=0;i<array.length;i++){
const self = array[i];
if(!josn[self]){
res.push(self);
josn[self] = 1;
}
}
return res;
}
}
export default common;２、有一个大数组a1,小数组a2，我要在a1中找到a2的所有值，同样先想到的是双循环.新的思路为将a1数组做成数据字典,即对象数组，里面的对象中的key为原数组元素的一个值，对象的值直接为原数组的元素，这样在循环a2中时就可以找到数据字典相对应的信息,代码中productDictList为a1，cartList为a2
productDictList () {
const dict = {};
this.productList.forEach(item => {
dict[item.id] = item;
});
return dict;
},
class="cart-content">
<div class="cart-content-main" v-for="(item,index) in cartList" :key="item.id">
<div class="cart-info">
<img :src="productDictList[item.id].image">
<span>{{productDictList[item.id].name}}</span>
</div>
<div class="cart-price">
￥ {{productDictList[item.id].cost}}
</div>
<div class="cart-count">
<span class="cart-count-minus" @click="handleCount(index,-1)">-</span>
{{item.count}}
<span class="cart-count-add" @click="handleCount(index,1)">+</span>
</div>
<div class="cart-cost">￥{{productDictList[item.id].cost*item.count}}</div>
<div class="cart-delete">
<span class="cart-control-delete" @click="handleDelete(index)">删除</span>
</div>
</div>３、vuex中actions和mutations看起来很像，但是mutations只是单纯的修改state的值，而actions主要是异步处理操作，如获取数据和提交数据等，然后再提交mutation。还有就是为何不能在组件data中不能获取state是因为，data只会在created执行前赋值一次，相当于js中的字面量,不会在随着state的值改变而改变，也就是所谓的没有更新检测,但是在计算属性中computed 则是通过【依赖追踪】实现的，在 computed 求值时引用的 Vue 变量变化时，会触发对 computed 的重新计算,所以你可以使用 computed 去引用 Vuex 状态变量，从而使得依赖追踪生效。
4、获取vuex中state的部分数据到底在组件内部实现还是在vuex的getters获取
如果数据还有其他组件用，放在vuex中
如果要跨多级组件传递数据，放在vuex
如果对于持久化的数据(如：登录用户的信息),放在vuex中
数据和当前组件有很强的相关性或者是数据只在当前组件中使用，建议放在组件内
最后由于篇幅的原因没有全部介绍所有的组件，有兴趣的可以评论留言或直接在https://github.com/yanggreater/Vue-project/tree/master/%E7%94%B5%E5%95%86%E7%BD%91%E7%AB%99获取代码资源。