Vue2.5从零开发猫眼⑧——引入store、LocalStorage和优化上线

Vue2.5从零开发猫眼系列以更新完毕

Vue2.5从零开发猫眼①——前言 

Vue2.5从零开发猫眼②——项目开始前准备

Vue2.5从零开发猫眼③——启动页开发

Vue2.5从零开发猫眼④——Home页开发

Vue2.5从零开发猫眼⑤——影院页开发

Vue2.5从零开发猫眼⑥——个人中心组件开发

Vue2.5从零开发猫眼⑦——City组件开发

Vue2.5从零开发猫眼⑧——引入store、LocalStorage和优化上线

引入store

• 按照vuex

  npm install -D vuex

• 在src目录下创建store文件夹

store文件夹住要存放以下几个文件

states.js

export default {
  city: '北京'
}

mutations.js

export default {
    setCity(state, city) {
        state.city = city;
    }
}

getters.js

export default {
    city: state => state.city
}

actions.js

export default {
}

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import state from './states';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

Vue.use(Vuex)

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

export default store;

下面分别讲下对应文件的作用

• states.js 主要存放state的数据
• mutations.js 主要封装改变state数据的方法
• getters.js <主要获取states class="js定义的state数据
• actions.js 处理异步数据或者封装多个mutations操作,比如ajax请求，要同时更新几个mutations的操作
• index.js 入口文件

当前城市从vuex里获取

在Home组件的NavMenu子组件中,分别进行如下操作

import {mapGetters} from 'vuex'
computed: {
    ...mapGetters([
      'city'
    ])
}
<span>{{ city }}</span>

在Cinema组件的NavMenu子组件中,分别进行如下操作

import {mapGetters} from 'vuex'
computed: {
    ...mapGetters([
      'city'
    ])
}
<span>{{ city }}</span>

在City组件的List子组件中，分别进行如下操作

import {mapGetters, mapMutations} from 'vuex'
computed: {
    ...mapGetters([
      'city'
    ])
},
methods: {
    ...mapMutations([
      'setCity'
    ])
},
// 分别在对应的列表增加click事件
@click="setCurrentCity(item.name)"
@click="setCurrentCity(innerItem.name)"

setCurrentCity(city) {
  this.setCity(city);
  this.$router.push('/home');
}

引入LocalStorage

github已经有了对LocalStroge的封装，我们这里直接使用npm下载

npm install store2 -S

在store\state.js 使用

import store from 'store2';

export default {
  city: store.local.get('city') || '北京'
}

在store\mutations.js 使用

import store from 'store2';

export default {
    setCity(state, city) {
        state.city = city;
        store.local.set('city', city);
    }
}

优化上线

时间有限，暂时就做这这么多功能，包含了大部分功能和vue知识。如果有疑问，请到github提issue

懒加载的应用

最开始我们在mian.js已经引用了懒加载如:

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  loading: 'assets/images/loading.gif'
})

我们在Home的Content子组件应用

<img v-lazy="movie.img" />

将所有组件拆分成异步组件

修改router\index.js

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

const Home = (resolve) => {
  import('@/pages/home/Home').then((module) => {
    resolve(module)
  })
}

const Start = (resolve) => {
  import('@/pages/start/Start').then((module) => {
    resolve(module)
  })
}

const Cinema = (resolve) => {
  import('@/pages/cinema/Cinema').then((module) => {
    resolve(module)
  })
}

const My = (resolve) => {
  import('@/pages/my/My').then((module) => {
    resolve(module)
  })
}

const City = (resolve) => {
  import('@/pages/city/City').then((module) => {
    resolve(module)
  })
}

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'start',
      component: Start
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/cinema',
      name: 'cinema',
      component: Cinema
    },
    {
      path: '/my',
      name: 'my',
      component: My
    },
    {
      path: '/city',
      name: 'city',
      component: City
    }
  ]
})

npm run build

打包上线。