vue07---elementui使用/

elementui使用

cnpm isntall -S [email protected]

vuex使用

概念

# vuex :状态管理器---》存数据(变量)的地方，所有组件都可以操作
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
 

http://photo.liuqingzheng.top/2022%2010%2030%2003%2003%2007%20/fc15b1f552b1465db223ff7abf8e0425.pnghttp://photo.liuqingzheng.top/2022%2010%2030%2003%2003%2007%20/fc15b1f552b1465db223ff7abf8e0425.png搭建vuex环境

创建文件：src/store/index.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   })

在main.js中创建vm时传入store配置项

   ......
   //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })

基本使用

初始化数据、配置actions、配置mutations，操作文件store.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //响应组件中加的动作
   	jia(context,value){
   		// console.log('actions中的jia被调用了',miniStore,value)
   		context.commit('JIA',value)
   	},
   }
   
   const mutations = {
       //执行加
   	JIA(state,value){
   		// console.log('mutations中的JIA被调用了',state,value)
   		state.sum += value
   	}
   }
   
   //初始化数据
   const state = {
      sum:0
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   })

组件中读取vuex中的数据：$store.state.sum

组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

Router使用

# 提倡单页面应用，需要做页面的跳转----》借助于Router实现页面组件的跳转


# 1 简单使用
	-页面跳转（咱们之前学过了）
    -写个页面组件
    -在router--->index.js--->routes数组中加入一个路由即可
    
# 2 组件中实现页面跳转
	-两种方式
    	-方式一：使用 router-link 标签，to 地址
         	
		-方式二：js控制
        	this.$router.push('/about')
            
            
            
# 3 路由跳转时，可以使用对象
	-1  通过对象跳转路由name形式： 
	-2 通过对象跳转路由path形式： 
    -3 对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面
    -4 在另一个页面中取出地址栏中数据：console.log(this.$route.query)
    -5 这种传递方式和 3  一样 
    -6 注意区分：
    	this.$route：当前路由对象，当前路径，取传递数据。。。
        this.$router：整个路由对象，主要做跳转用
        
    -7 路径中分割出 参数
    	-配置：    
        	{
            path: '/detail/:pk',
            name: 'detail',
            component: DetailView
        	},
        -在路由中取：
        	this.$route.params.pk
            
    -8 路由跳转时，使用 7 的样子
    	-this.$router.push({name: 'detail', params: {pk: 999}})
        -
        
        
 # 4 this.router 的一些方法
    this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
    this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
    this.$router.back(): 请求(返回)上一个记录路由
    this.$router.go(-1): 请求(返回)上一个记录路由
    this.$router.go(1): 请求下一个记录路由

多级路由

# 使用步骤：
	- 1 新建一个页面组件（LqzView），配置路由
    	  {
            path: '/lqz',
            name: 'lqz',
            component: LqzView,
        },
    -2 在页面中，想再显示页面组件，实现点击切换的效果
    	   
lqz页面
            
              lqz-01
            
            
              lqz-02
            

            
            # 以后这里变换页面组件，多级路由
            
    -3 新建两个页面组件，Lqz01.vue，Lqz02.vue，配置路由children
        {
            path: '/lqz',
            name: 'lqz',
            component: LqzView,
            children: [ //通过children配置子级路由
                {
                    path: 'lqz01', //此处一定不要写：/news
                    component: Lqz01
                },
                {
                    path: 'lqz02',//此处一定不要写：/message
                    component: Lqz02
                }
            ]
        },

路由守卫

# 前置路由守卫，再进入路由之前做判断
# 写在router-index.js中，以后访问任意一个路由，都会执行这个代码
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    // 要是访问lqz01，都不能跳转'
    // 如果没有登录，不能访问
    if (to.path == '/lqz/lqz01') {
        alert('你灭有权限')
    } else {
        next() # 继续访问
    }

路由的两种工作模式

路由器的两种工作模式
1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3 hash模式：
    地址中永远带着#号，不美观 。
    若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    兼容性较好。
4 history模式：
    地址干净，美观 。
    兼容性和hash模式相比略差。
    应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

localstorage和sessionstorage,和cookie

# 前端存储数据
	- 登录成功，有token，存本地
    - 不登陆加购物车
    
# 前端可以存数据的位置：
	localstorage：永久存储，除非你删除，关闭浏览器，再打开还会在
    sessionstorage：只在当前会话生效，关闭浏览器，就没了
    cookie：有过期时间，到了过期时间，自动删除
    
# 操作这三个位置