具体可以参考这个链接,直通车: link.
内存存储的数据仓库
步骤
mutations: {
/**
* state 就代表上面 state对象
* userInfo 代表要传递过来的用户信息
*/
setInfo(state, userInfo) {
state.userInfo = userInfo
}
}
//这个是用户在layout页面发送请求得到的用户信息 存到仓库去 方便其他页面使用
// 触发 mutations 中的方法
this.$store.commit('setInfo',res.data.data)
getters: {
getInfo(state) {
return state.userInfo
}
},
{{$store.getters.getInfo.username}} 欢迎您,您的角色是 {{$store.getters.getInfo.role}}
注意
我们在store的state中,在定义 userInfo 要把它设置为一个空对象或者空字符串,否则,第一次使用的时候因为是null,你再调用它里面的属性就会报错
store文件夹下的index.js文件:
main.js文件中:
vuex中action的使用:
vuex中module的使用: 点击按钮可以把input输入框中的内容valueName显示在页面上{{name}}
细说:
1 . vuex
什么是vuex
vue的集中状态管理工具
使用:
步骤:
a. 安装
npm install vuex --save
b. 引用
import Vuex from ‘vuex’
Vue.use(Vuex)
2.1 state
管理状态(数据)
使用方式:
1)this.$store.state.num
不用:太麻烦
2)computed: {
count() {
return this.$store.state.num
}
}
3)mapState
computed:mapState([
'num'
])
缺点:无法改变变量的名称
4)mapState
computed:mapState({
count: 'num'
})
缺点:无法添加新的computed属性
5)mapState
computed:{
...mapState({
count: 'num'
})
}
缺点:无法添加新的computed属性
将仓库中的状态映射到组件中
2.2 getters
计算属性
使用方式::
1)this.$store.getters.newnum
2)mapGetters来映射
computed: {
...mapGetters({
newnum: 'newnum'
})
}
mapGetters:
将仓库中的计算属性映射到组件中
2.3 mutations
修改状态
使用方式:
1)this.$store.commit('方法名',{})
2)this.$store.commit({
type: '方法名',
name: ''...
})
3) mapMutations:
methods: mapMutations([
'chageNum'
])
4)
methods: mapMutations({
changnum: 'chageNum'
})
5)
methods: {
mapMutations({
changnum: 'chageNum'
})
}
2.4 actions
异步得到参数,并且将结果返回给mutation
使用方式:
1)this.$store.dispatch('方法名')
2)this.$store.dispatch({
type: '方法名'
})
3) mapActions:
methods: mapActions([
'chageNum'
])
4)
methods: mapActions({
changnum: 'chageNum'
})
5)
methods: {
mapActions({
changnum: 'chageNum'
})
}
将仓库中的异步操作的方法映射到组件中
2.5 moudles:
步骤:
1)定义仓库模块:
let a = {
namespaced: true
state: {....},
getters: {....},
mutations: {....},
actions: {....},
}
2)仓库模块管理到仓库中
var store = new Vuex.Store({
modules: {
a:a
}
})
3)使用:在其它组件中:
import {mpa...} from "vuex"
export default {
computed: {
...mapState('a', {
name: 'name'
})
},
methods: {
...mapMutations('a', {
fn: 'fn'
}),
...mapActions('a', {
fnn: 'fnn'
})
}
}
const router = new VueRouter({
routes: [{
path: '/login',
component: Login,
meta: {
title: '登录'
}
},
{
path: '/layout',
component: Layout,
meta: {
roles: ['超级管理员', '管理员', '老师', '学生']
},
children: [{
path: 'welcome',
component: Welcome,
//借助路由元信息,对这条路径做个具体的描述
meta: {
roles: ['超级管理员', '管理员', '老师', '学生'],
icon: 'el-icon-date',
fullPath: '/layout/welcome',
title: '个人信息'
},
},
{
path: 'chart',
component: Chart,
meta: {
roles: ['超级管理员', '管理员', '老师'],
icon: 'el-icon-pie-chart',
fullPath: '/layout/chart',
title: '数据预览'
},
},
{
path: 'user',
component: User,
meta: {
roles: ['超级管理员', '管理员', '老师'],
icon: 'el-icon-user',
fullPath: '/layout/user',
title: '用户列表'
},
},
{
path: 'enterprise',
component: Enterprise,
meta: {
roles: ['超级管理员', '管理员', '老师'],
icon: 'el-icon-office-building',
fullPath: '/layout/enterprise',
title: '企业列表'
},
},
{
path: 'question',
component: Question,
meta: {
roles: ['超级管理员', '管理员', '老师', '学生'],
icon: 'el-icon-edit-outline',
fullPath: '/layout/question',
title: '题库列表'
},
},
{
path: 'subject',
component: Subject,
meta: {
roles: ['超级管理员', '管理员', '老师'],
icon: 'el-icon-notebook-2',
fullPath: '/layout/subject',
title: '学科列表'
},
},
]
},
{
path: '/',
redirect: '/login'
}
]
});
配置之后呢,我们就要在layout页面上显示我们不同的菜单啦(根据用户身份展示不同菜单)
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
],
};
3、在 src/plugins/element.js 中按需导入以及注册我们项目需要的组件
import Vue from 'vue'
//全部导入注册
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
//把element全局注册弄成局部注册,需要哪个组件就导入哪个组件,免得体积太大:
// 1.安装 npm install babel-plugin-component -D
// 2. 在babel.config.js文件下面复制element官网下要复制的代码
// 3.把全部导入注册变成按需导入然后按需注册
// 按需导入
import {
Form,
FormItem,
Input,
Button,
Icon,
Row,
Col,
Checkbox,
Link,
Message,
Dialog,
Upload,
Header,
Main,
Aside,
Container,
Menu,
MenuItem,
Card,
Select,
Option,
MessageBox,
Table,
TableColumn,
Pagination,
DatePicker,
Cascader,
Radio,
RadioGroup
} from 'element-ui'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Row)
Vue.use(Col)
Vue.use(Checkbox)
Vue.use(Link)
Vue.use(Dialog)
Vue.use(Upload)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)
Vue.use(Container)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(Card)
Vue.use(Select)
Vue.use(Option)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)
Vue.use(DatePicker)
Vue.use(Cascader)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm
// vue.config.js
module.exports = {
// 选项...
lintOnSave: false,//vue-cli底层是基于node ,所以用nodejs的导出,关闭eslint
publicPath:'./'//更改访问打包资源的路径
};
因为我们的项目,必须运行在 8080 端口,我们直接右键用vs自带的live server端口是5050,是会有跨域的 ,所以我们可以借助于一个全局包 http-server
使用步骤
1、安装这个全局包: npm i http-server -g
2、切换到项目根目录,在终端中,使用http-server 运行我们的代码:http-server dist