import vuex from "vuex"
import Vue from "vue"
import userDate from "./zth/index.js"
Vue.use(vuex);
const store = new vuex.Store({
// 存储数据的地方
state:{
sum:0,
},
// 操作state数据
mutations:{
funSum(state,value){
// console.log(state);
// console.log("------------------");
// console.log(value);
state.sum += value
}
},
// 处理异步,可以对mutation中间件操作
actions:{
mySum(context,value){
setTimeout(()=>{
context.commit("funSum",value)
},2000)
}
},
// 用于加工state的值,相当于全局计算属性
getters:{
getSum(state){
return state.sum+100;
}
},
// 存放模块
modules:{
userDate
}
})
export default store
import VueRouter from "vue-router"
import Vue from "vue"
import LoginUser from "@/views/login.vue"
import HomePage from "@/views/home.vue"
Vue.use(VueRouter);
const router = new VueRouter({
// 路由配置的集合
routes:[
{
path:"/",
// redirect重定向
redirect:"/login"
component:LoginUser
},
{
// 访问的名称
path:"/login",
// 文件的路径
component:LoginUser
},
{
path:"/home",
component:HomePage
}
]
})
export default router
作用:实现切换页面,相当于a标签
<router-link active-class="active" to="/home">登录</router-link>
// 导入区
import VueRouter from "vue-router"
import Vue from "vue"
import LoginUser from "@/views/login.vue"
import HomePage from "@/views/home.vue"
import page1 from '@/views/page1.vue'
import page2 from '@/views/page2.vue'
Vue.use(VueRouter);
// routes区----配置路由区
let routes=[
{
// path:"/home"
// 记得使用/home/:id/:title
path:"/",//路由查询路径
component:HomePage,//组件的来源
name:"home",//可以使用name属性代替path属性进行查询
meta:{
title: "用户列表",breadcrumb: "用户管理"
},
// redirect重定向
// redirect:"/home",
children:[
{ path: "/home", name: "home", component: HomePage,
// redirect:"/page1",
children:[
{ path: "/page1", name: "page1", component: page1},
{ path: "/page2", name: "page2", component: page2}
]
},
]
//提供元数据
// 第一种 对象形式 props接收参数
// props:{
// id: '888',
// title: '你好啊'
// },
// 第二种方式 1.
// 接收参数 props
// 使用params 只能使用name作为标识
// 使用query 可以使用name和path作为标识
// 方式的区别:params直接写在路径上面 query send({id:123})
// params 请求头 query请求体
// params query
// props: false,
// 第三种 ,函数式
// props($route) {
// console.log("rooot",$route);
// return {
// id: $route.params.id,
// title: $route.params.title,
// // 还可以返回一些别的数据
// // a: 1,
// // b: "hello"
// }
// },
// alias:'/qwe',// 为当前路由提供一个或多个别名,访问别名时会展示与原路由相同的组件内容。
},
{
// 访问的名称
path:"/login",
// 文件的路径
component:LoginUser
},
// {
// path:"/home",
// component:HomePage
// }
]
// Object.key
// 路由实例化 --所有路由配置区
const router = new VueRouter({
// 路由配置的集合
routes:routes
})
export default router
提供元数据
第一种
对象形式 props接收参数
第二种方式
接收参数 props
使用params 只能使用name作为标识
使用query 可以使用name和path作为标识
方式的区别:
params直接写在路径上面 query send({id:123})
params 请求头 query请求体
第三种
函数式