混入、插件、插槽、vuex、本地存储

【混入】

　　# mixin(混入)

　　　　功能：可以把多个组件共用的配置提取成一个混入对象,不需要在每个组件中都写了

使用步骤

 

 

 。

。

。

【插件】

# 1 写plugins/index.js
import Vue from "vue";
import axios from "axios";
import hunru from "@/mixin";
export default {
    install(a,name) {
        console.log('----------',name)

        // 1 定义全局变量,放到原型中
        // prototype 原型链,一般定义在原型中的变量，都用 $ 开头，防止污染---》对象中可以定义同名属性，冲突
        Vue.prototype.$axios = axios
        // Vue.prototype.$BASE_URL='http://127.0.0.1:8000/'


        // 2  定义指令  自定义指令
        //定义全局指令：跟v-bind一样，获取焦点
        Vue.directive("fbind", {
            //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus();
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value;
            },
        });

        // 3 使用混入
        Vue.mixin(hunru)
        // 4 定义全局组件--》elementui
    }
}

# 3 在main.js中使用，可以传参数
# 1 使用自定义插件
import my from '@/plugins'
Vue.use(my,'lqz') // 内部本质会执行install

==========================================

	-有些第三方插件，用了以后，增强了vue功能-this.$router-全局组件 ：el-button-this.$message--->-this.$http.get

。

。

。

【插槽】

# 1 新建组件，定义插槽
<template>
  <div class="helloworld">
    <h2>我是hello world</h2>
    <slot name="a"></slot>
    <h2>结束了</h2>
    <slot name="b"></slot>

  </div>

</template>
============================================
# 2 使用组件，使用插槽
<template>
  <div class="home">
    <h1>首页</h1>
    <HelloWorld>
      <template v-slot:a>
        <div>html结构2</div>
      </template>

      <template v-slot:b>
        <img src="@/assets/logo.png" alt="">
      </template>
      
    </HelloWorld>

  </div>
</template>

。

。

。

【vuex】

 

 

 

【本地存储】

# 登录成功---》token存储 cookie：登录信息放这里，有过期事件，一旦过期，就没了

sessionStorage：当前浏览器生效---》关闭浏览器，数据就没了

localStorage：永久生效，除非代码删除或清空浏览器缓存 -未登录，加购物车

# cookie 需要下载 cnpm install vue-cookies -S

<template>
  <div class="home">
    <h1>首页</h1>
    <h2>localStorage的使用</h2>
    <button @click="handleSaveLocalStorage">存储到localStorage</button>
    <button @click="handleGetLocalStorage">从localStorage取出</button>
    <button @click="handleDeleteLocalStorage">删除localStorage</button>

    <h2>sessionStorage使用</h2>
    <button @click="handleSavesessionStorage">存储到sessionStorage</button>
    <button @click="handleGetsessionStorage">从sessionStorage取出</button>
    <button @click="handleDeletesessionStorage">删除sessionStorage</button>
    <h2>cookie使用</h2>
    <!--    -->
    <button @click="handleSaveCookie">存储到cookie</button>
    <button @click="handleGetCookie">从cookie取出</button>
    <button @click="handleDeleteCookie">删除cookie</button>

  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {
    handleSaveLocalStorage() {
      localStorage.setItem("name", 'wxx')
      let user = {
        name: 'xxx',
        age: 19
      }
      localStorage.setItem("user", JSON.stringify(user)) // 不要放对象

    },
    handleGetLocalStorage() {
      let name = localStorage.getItem("name")
      let user = localStorage.getItem('user')
      console.log(name)
      console.log(user)
      console.log(typeof user)

    },
    handleDeleteLocalStorage() {
      localStorage.removeItem('name')
      localStorage.clear()

    },


    handleSavesessionStorage() {
      sessionStorage.setItem("name", '彭于晏')
    },
    handleGetsessionStorage() {
      let name = sessionStorage.getItem('name')
      console.log(name)
    },
    handleDeletesessionStorage() {
      sessionStorage.removeItem('name')
      sessionStorage.clear()
    },

    handleSaveCookie() {
      this.$cookies.set('name', 'zzzz', '1h')
    },
    handleGetCookie() {
      let name = this.$cookies.get('name')
      console.log(name)
    },
    handleDeleteCookie() {
      this.$cookies.remove('name')

    },
  }
}
</script>