内容：vuex、element-ui
一、vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
仓库
state、mutations、getters、actions、module
1.安装
npm install vuex --save
2.引用
import Vuex from 'vuex'
Vue.use(Vuex)
const store = Vuex.Store({
})
3.核心概念
(1)state
类似单页面data
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
(2)mutations
类似单页面methods
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
mutation 同步操作
(3)actions
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
(4)getters
类似computed
有时候我们需要从 store 中的 state 中派生出一些状态
示例代码
/src/main.js来定义仓库
import Vuex from 'vuex'
Vue.use(Vuex)
//创建仓库
const store = new Vuex.Store({
state:{
msg:'hello vuex',
count:5
},
mutations:{
setMsg(state,txt){
state.msg = txt
},
setCount(state){
state.count+=2
}
},
actions:{
setCount(context){
console.log('actions被执行了')
context.commit('setCount')
}
},
getters:{
newCount:state=>{
return state.count*3
}
}
});
在页面组件中使用/改变仓库中的数据：
<template>
<div>
<h3>vuex的使用</h3>
<h4>从仓库中获取数据{{ $store.state.msg }}，数量:{{ $store.state.count }}</h4>
<button @click="changeMsg">点我改变数据--mutation</button>
<button @click="$store.dispatch('setCount')">点我改变数据--action</button>
<p>通过getters获取的数据{{ num }}</p>
</div>
</template>
<script>
export default {
methods:{
changeMsg(){
this.$store.commit('setMsg','你好')
this.$store.commit('setCount')
}
},
computed:{
num(){
return this.$store.getters.newCount
}
}
}
</script>
(5)module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
namespaced:true表示启用命名空间
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
modules:{
member:{
namespaced:true,//启用命名空间
state:{
msg:'hello module member'
},
mutations:{
setMsg(state,txt){
state.msg = txt;
}
}
}
}
});
二、axios代理配置【跨域】
[图片上传失败...(image-fb95ad-1582112522393)]
出现以上错误就是不允许跨域
跨域：
1.nginx进行跨域
2.apache进行跨域
3.程序代码进行设置，允许跨域
4.webpack配置代理进行跨域
/confing/index.js
proxyTable 代理配置表
proxyTable: {
'/关键词':{
target:'http://localhost:3001',
pathRewrite:{
'^/关键词':'/api'
}
}
}
当项目中要请求包含“/关键词”的链接时，如：http://localhost:8080/api/userlist
代理配置会进行重定向到target对应的链接
http://localhost:3001/api/userlist
pathRewrite:对链接地址中的关键词进行重写
三、ui库
1.element-ui
官网：https://element.eleme.cn/#/zh-CN
(1)安装
npm i element-ui --save
(2)引用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
render: h => h(App)
})
2.mintui(移动端)
官网：https://mint-ui.github.io/#!/zh-cn
3.iview(pc端)
4.vant(移动端)
官网：https://youzan.github.io/vant/#/zh-CN/
四、作业
1.使用element-ui或者iview进行后台管理系统页面布局
2.利用本地数据实现数据的管理（管理员用户的添加、列表展示、删除功能）
