hms项目Vue前台（四） nprogress进度条和vuex模块式开发

nprogress进度条

加载的时候会有进度条显示，加载完毕没了

安装命令

cnpm install --save nprogress

当请求时候显示，响应后不显示，所以可以在请求响应拦截器使用
引入

import nprogress from “nprogress”;
import ‘nprogress/nprogress.css’ //样式必须引入

使用

nprogress .start(); //进度条开始
nprogress .done(); // 进度条结束

也可以在nprogress.css中改css样式，进度条颜色啥的

vuex模块式开发

1 vuex概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

当项目比较大，组件通信数据比较复杂，这种情况再使用vuex

Vuex是插件，通过vuex仓库进行存储项目的数据

4.Vuex管理哪些状态呢？
有什么状态时需要我们在多个组件间共享的呢?

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。比如用户的登录状态、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。

这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

2 使用

2.1 安装

cnpm install --save vuex

在src文件夹下创建store文件夹，并写index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

// state 仓库存储数据的地方
const state = {}
// mutations 修改state唯一地方
const mutations = {}
// actions 处理action
const action = {}
// 理解为计算属性
const getters = {}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,

})

2.2 main.js注册

import store from '@/store'

new Vue({
  render: h => h(App),
  // 注册路由
  router,
  // 注册仓库，组件会多一个$store属性
  store
}).$mount('#app')

2.3 Home页面测试

例如：我们在home页面一个button,想实现点一下加一

在home里面的index.vue ;

import {mapState} from ‘vuex’

 <button @click="add">点击加一 </button>
    <span>{{count}}</span>

  computed: {
      ...mapState(['count'])
    },
    methods: {
      add() {
        // 派发action
        this.$store.dispatch('add')
      }
    }

computed: {
      ...mapState(['count'])
    }

store里面呢index.js

// state 仓库存储数据的地方
const state = {
    count: 1,
}
// mutations 修改state唯一地方
const mutations = {
    ADD(state) {
        state.count++;
    }
}
// actions 处理action
const actions = {
    // 可以书写逻辑，不能修改
    add({commit}) {
        commit('ADD');
    }
}

2.4 vuex实现模块开发

假如以后有过多的模块，组件过多，接口很多， state里面就要存好多数据，难道都存在state ?

我们可以分模块

在store文件夹中建home模块和login模块

在两模块分别创建index.js文件

// home模块小仓库
const state = {};
const mutations = {};
const actions = {};
const getters = {};


export default {
    state,
    mutations,
    actions,
    getters,
}

在store里面的index.js引入小仓库

// 引入小仓库
import home from "./home";
import login from "./login";
export default new Vuex.Store({
    // 实现vuex模块式开发数据
    modules: {
        home,
        login,
    }
})