mixins和vuex的区别 混入

回顾

配置文件 
  .env.development   npm run serve 
  .env.production    npm run build
  .env
  .env.xx   -->     npm run xx   --->package.json中 script属性自行做配置

vuex :状态机(用来存储数据的仓库)
当多个组件都想共享某个数据时，我们可以把该数据放入仓库中，便于操作同一个数据
state --存储数据
getters--存储计算属性---了解
mutations--存储唯一改变state数据的方法
actions：存储异步方法

非模块化：
	使用辅助函数  
	import {mapState,mapActions} from 'vuex'
	computed:{
		...mapState([''])
	},
	methods:{
		...mapActions([''])
	}
	
	js中使用
	this.$store.state.属性
	this.$store.dispatch/commit("方法名"，参数)
模块化之后：
	使用辅助函数
	import {createNamespacedHelpers} from 'vuex'
	const {mapState,mapActions}=createNamespacedHelpers("模块名")

	js中使用
	this.$store.state.模块.属性
	this.$store.dispatch/commit("模块/方法名"，参数)

ws控制台报错解决

代理相关的错误

1 关闭防火墙
2  devServer: {
    //代理
    proxy: {
      //标记
      "/api": {
        //代理的地址
        target: "http://localhost:3000",
        ws:false,

关于组件内部和仓库的取名冲突问题

mapXxxx(['属性/方法'])
扩展：能够进行更改别名
mapXxxx({
	别名:"仓库中的属性/方法"
})

Demo:

  methods: {
    ...mapActions({
        //别名:"仓库中的名字"
        mylogin:"login"  //其中mylogin是别名，login是仓库的方法名
    }),

关于刷新页面导致vuex仓库清空的问题

思路: 通过导航守卫来拦截，判断如果vuex的userInfo为null，则重新发ajax(getUserInfo)获取user对象，重新

为仓库中的userInfo赋值即可

// //全局前置守卫
router.beforeEach(async (to, from, next) => {
  if (to.path == "/login" || to.path == "/register") {
    next()
  } else {
    //判断vuex中userInfo是否为null
    //获取仓库中的userInfo
    if (store.state.users.userInfo) {
      next();
    } else {
      //userInfo为空：代表的是刷新
      //发送请求
      let res = await api.users.getUserInfo();
      if (res?.code == 200) {
        //你是合法登录过的，并且token并没有过期
        //重新把返回的user对象赋值给仓库
        store.commit('users/CHANGE_USERINFO', res.user)
        next();
      }
    }
  }

})

混入 mixins

概念

可以通过混入来抽取出组件中共同属性，比如data、methods、computed。。。。
作用：方便维护
混入的优先级  <  组件本身属性的优先级

语法：

1 src新建mixins目录,下面新建myMixins.js
2 编辑myMixins.js
export default {
    data(){
        return{
            gender:2,
            name:"王五"
        }
    },
    methods:{
        ff(){
            console.log("ff");
        }
    }
}
3 在组件中引入混入对象
import myMinix from '../mixins/myMixins.js'
export default {
    mixins:[myMinix],

特点：

组件使用mixins中的属性或者方法，当改变mixins的属性值或者是方法内部的一些逻辑操作时，只会在当前组件中起作用而并不会改变混入对象的属性值或者是方法，故其他组件引入mixins并使用其属性或者是方法时是不会受当前组件操作影响的

mixins和vuex的区别

vuex： 用来做状态管理的，state中定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins： 可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

# ElementUI

## 概念：

ElementUI 是饿了么前端团队推出的基于vue2.0的桌面端Ui框架
重点： 基于vue2.0 PC端

## 新建项目

1 vue create xxx
2 安装axios和elementUI插件
axios: npm i axios
elementUI: vue add element

WARN There are uncommitted changes in the current repository, it’s recommended to commit or stash them first.
? Still proceed? (y/N) y

? How do you want to import Element?

Fully import —把elementUI中的全部组件都安装进来 推荐
Import on demand ----根据自己需求按需引入组件—性能优化：非常麻烦

Do you wish to overwrite Element’s SCSS variables? (y/N) n

? Choose the locale you want to load
ug-CN
vi

zh-CN
zh-TW
af-ZA

## 项目结构

src
plugins
element.js: 让vue能够使用element提供的所有组件
import Vue from ‘vue’
import Element from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’

    	Vue.use(Element)
main.js:
	import './plugins/element.js'

## 相关核心：

1 侧栏导航激活路由

    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :router="true"
    >
    
    开启后：激活时会把index的值当路径继而跳转路由

2 表格的使用

必须使用<template  slot-scope  属性来获取数据

  <el-table-column label="列头" width="180">
    <template slot-scope="scope">
       	scope.row.属性
    </template>
  </el-table-column>

3 头像的使用：

  <el-table-column label="头像" width="180">
    <template slot-scope="scope">
      <span style="margin-left: 10px">
        <!-- {{ scope.row.head }} -->
        <el-avatar v-if="scope.row.head" size="large" :src="`http://localhost:3000/img/${scope.row.head}`"></el-avatar>
        <el-avatar v-else> 无 </el-avatar>
      </span>
    </template>
  </el-table-column>