摘要：
按照之前的写法，定义mutation，使用mutation，当如果要修改mutation名字的时候，需要修改至少两处，当有多出引用此名字的时候，有多少处引用就要改多少个地方，不便于管理 解决方案，把所有mutation的名字抽离出来定义为常量，引用常量做名字，以后要改，则只需改一处即可，并且一眼就能 阅读全文
摘要：
有些时候，我们并不想拿到原数据或者所有的原数据，想要拿到加工过后的数据，实现思路就和计算属性一样 getters可以理解为vuex中的计算属性 使用 由于只有一条数据，所以看不出效果 同样的，也支持mapGetters的写法 阅读全文
摘要：
在组件中要使用vuex的状态，取值表达式会很长 处理方式1：使用计算属性 、 方式二：可以使用vuex-mapStore来处理，列表中可以是多个状态，只要是vuex管理的状态都可以在这里使用 以上方法，虽然可以很容易使用vuex里面的状态，但是当有自定义的计算属性的时候，无法融合 方法3：在计算属性 阅读全文
摘要：
异步处理逻辑 应用场景： 当这样来回切换的时候，每一次切换都会请求对应的接口，会对后端接口造成不必要的压力，而且如果用户网络不好的话，请求接口会变慢，造成不好的用户体验 解决办法：当切换到对应页面的时候，判断是否有对应组件的数据，如果有，则直接从store中获取数据渲染渲染，如果没有，则通过acti 阅读全文
摘要：
上一篇的操作，虽然可以达到效果，但是有很大风险，vuex中的状态是共享的，所有组件都可以使用和改变，但状态改变后，无法确定是哪个组件中的事件使vuex中的状态改变了，所以需要一个第三方的东西来统一处理，Mutations 同步处理逻辑 vue devtools安装和使用： 安装和说明：https:/ 阅读全文
摘要：
VuexVuex是在中大型项目中，用来管理一些变量的。因为如果项目比较大，一些数据在各个页面中可能需要进行交替使用，如果数据量比较大，通过params或者query的方式不太方便。这时候就可以使用Vuex来管理这些数据。 官方文档：https://vuex.vuejs.org/zh/guide/ 安 阅读全文
摘要：
获取影院数据 渲染 要使用better-scroll实现的效果 下载Better-Scroll库：cnpm install --save better-scroll 使用better-scroll 动态设置div高度 cinema <template> <div class="cinema" :st 阅读全文
摘要：
实现点击电影信息跳转到详情页面 获取传递给detail组件的参数，去请求接口获取数据 渲染数据 图片css和渲染图片 <template> <div v-if="filminfo"> <img :src="filminfo.poster" class="poster"> <h2>{{ filminf 阅读全文
摘要：
先实现film-header导航 实现film-header组件 FilmHeader组件 <template> <div> <ul> <router-link to="/film/nowplaying" tag="li" active-class="isActive">正在热映</router-l 阅读全文
摘要：
在预留的轮播位置，实现真正的轮播 安装swiper组件 swiper的css所在的位置 老版有dist文件夹，位置为：swiper/dist/css/swiper.css新版没有dist文件夹，位置为：swiper/swiper-bundle.css 实现swiper组件 <template> <d 阅读全文
摘要：
nowplaying页面局部css <style lang="scss" scoped> ul { li { padding: 10px; overflow: hidden; img { float: left; width: 100px; } } }</style> 由效果看，导演是一个数组，数组 阅读全文
摘要：
一：数据请求 nowplayingurl: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=8629683',headers: { 'X-Client-Info': '{"a":"3000","ch 阅读全文
摘要：
store.js main.js SubmitOrder.vue组件 导入并创建路由 使用路由 阅读全文
摘要：
VuexVuex是在中大型项目中，用来管理一些变量的。因为如果项目比较大，一些数据在各个页面中可能需要进行交替使用，如果数据量比较大，通过params或者query的方式不太方便。这时候就可以使用Vuex来管理这些数据。 官方文档：https://vuex.vuejs.org/zh/guide/ 安 阅读全文
摘要：
实现效果 cart.vue <style scoped lang='scss'> .cart-container { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; .mask-bg { background-color: rgb 阅读全文
摘要：
把计步器写成一个组件 导入并使用计步器组件 修改css 数量为0的时候，左边按钮和数量不显示 点击增加或减少事件 Stepper.vue <style scoped lang="scss"> .stepper-container { display: flex; align-items: cente 阅读全文
摘要：
查看商品详情 获取商品数据 商品详情页面，写成自定义组件 控制点击商品再展示 详情页和布局 关闭按钮点击事件 <style scoped lang="scss"> .gd-container { position: absolute; left: 0; right: 0; top: 0; botto 阅读全文
摘要：
左上角返回按钮 下方菜单栏只在首页展示 <template> <div id="app"><!-- <Home></Home>--> <router-view></router-view><!--路由出口--> <van-tabbar v-model="active" v-if="showTabba 阅读全文
摘要：
<style scoped> .merchant-container >>> .van-nav-bar { background: none; } /*去掉横线*/ .merchant-container >>> .van-hairline--bottom::after { border: none 阅读全文
摘要：
在左侧商品分类点击商品时，右侧自动跳转到对应的商品详情 定义一个点击事件 绑定点击事件 获取商品高度 触发点击事件时改为获取高度偏移量，并滚动 增加选中状态 效果 <style scoped> .merchant-container >>> .van-nav-bar { background: no 阅读全文