shop.editingStatus=!shop.editingStatus if (shop.editingStatus){ shop.goodsList.forEach((good,index)=>{ if (good.touchDelete){ good.touchDelete=false this.$refs[`goods-${shopIndex}-${index}`][0].style.left='0px' } }) }
六、个人中心地址管理页面
最后是个人中心地址管理页面，在这个页面中，我们会封装addressService层和fetch层，addressService层主要是负责页面中前后端交互的方法，如添加地址、删除地址、编辑地址和获取地址等，然后fetch层主要是负责从RAP接口中获取数据并返回一个promise对象到service层中，具体的封装方式和使用方式请自行查看源码。
另外在这个页面中，我们使用到了vue-router和vuex，接下来我将会简要介绍它们在个人中心地址管理页面中的使用方式。
首先是vue-router，他是用于构建单页面应用的，是基于路由和组件，路由用于访问特定的路径，然后特定的路径与特定的组件相联系相映射，传统页面中，是通过超链接来实现页面的跳转和切换的，但在vue-router中，则是路由的切换，即组件的切换。
我们先来看看是如何配置一个routes、创建一个router实例并把它注入到vue实例中去的：
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) //构造配置 let routes=[{ path:'https://www.jb51.net/', components: require('../components/member.vue') },{ path:'/address', components:require('../components/address.vue'), children:[{ path:'', redirect: 'all' },{ path:'all', components:require('../components/all.vue') },{ path:'form', name:'form', components:require('../components/form.vue') }] }] //创建router实例 let router=new Router({ routes }) export default router import Vue from 'vue' import router from './router' import store from './vuex' //根组件注入 let view=new Vue({ el:'#app', router, store }) //router-view标签作为配置路由后组件的容器 <div> <router-view></router-view> </div>
通过这样路由的配置和注入，我们就可以实现单页面下多组件的切换和嵌套了，如果上述有不懂的地方，请到vue-router的官网处查看文档和说明。
接着我们来讲一下vuex，vuex是对SPA即单页面应用进行数据的状态管理，如果想了解具体vuex是什么还有它的用途，请点击这篇文章：Vuex新手入门指南
vuex其实也是组件间通信的一种方式，说起组件间的通信，我们不如来一一列举一下他们的方式有哪些：
1.引用类型数据
用法：如果父组件有一个数据类型是引用类型的数据，当这个数据直接传递给子组件以后，在子组件对这个数据源进行修改的时候，父组件中该数据也会同步修改。
2.自定义事件
即子组件内部定义了一个自定义事件，可以用父组件在子组件上进行监听：
//子组件 this.$emit('change',18) //父组件 <foo :obj="obj" @change="changeAge"></foo> //父组件 methods:{ changeAge(age){ this.obj.age=age } }
3.全局事件（global bus）
//bus.js import Vue from 'vue' const bus=new Vue() export default bus //触发组件 import bus from 'js/bus.js' bus.$emit('change',18) //订阅组件 import bus from 'js/bus.js' bus.$on('change',(age)=>{ this.obj.age=age })
4.vuex状态管理
vuex的使用与vue-router有一点相似，具体代码如下：
import Vue from 'vue' //使用vuex插件 import Vuex from 'vuex' Vue.use(Vuex) import address from 'js/addressService.js' //创建Store实例 const store=new Vuex.Store({ state:{ lists:null }, mutations: { init(state,lists){ state.lists=lists } }, actions: { getLists({commit}){ address.getList().then(response=>{ commit('init',response.data.lists) }) } } }) export default store
之后同样的在跟组件对store实例进行注入即可，在上述实例中，state属性表示的是实例的状态，类似vue实例里的data，需要高度注意的是，不允许直接修改state里面的值，只允许定义一系列的类似事件的mutations来触发进行state的管理。而mutations属性里面存放的是同步事件，因此是对数据进行同步管理，要进行异步操作的话必须使用actions属性；actions属性里面存放一些异步的操作，在异步的操作进行完成之后再触发mutations里面的同步事件来对state里面的数据的状态进行同步的操作。