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,
}
})