混入、插件、插槽、vuex、vue-router、本地存储

【混入】

　　# 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】

# 1 vuex 在vue2中，大量使用

# 2 vue3中，Pinia 或 vuex

# 3 作用：集中式状态管理--》组件有自己的数据--》放在组件中---》有了状态管理器，多个组件可以共同操作这个状态管理器---》实现了组件间通信--》跨组件

 

 

 

# 1 安装 cnpm instlal vuex -S
# 2 新建 store/index.js,写入代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

# 3 在main.js 导入
import store from './store'
new Vue({
  store,
}

    
# 4 在store/index.js写代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// import moduleA from './a'
// import moduleB from './b'
export default new Vuex.Store({
    state: {
        //  定义一些变量
        count: 0
    },
    getters: {
        getCount (state) {
            return state.count+100
        }
    },
    mutations: {
        addOne(state, num) {
            console.log(state)
            state.count += num

        }
    },
    actions: {
        addCount(store, num) {
            // 发送ajax请求--》数据库加入购物车--》返回成功---》本地数量再加1
            console.log(store)
            console.log(num)
            store.commit('addOne', num + 1)
            // 直接操作 ：store.state.count++
            //store.dispatch('actions中的方法')

            }
        },



    modules: {
        // a: moduleA,
        // b: moduleB
    }
})

    
    
# 5 在组件中使用 (拿变量)
    js:this.$store.state.count
    html:$store.state.count
    
# 6 修改变量
    js中：
        1 this.$store.dispatch('actions定义的函数名',参数)
        2 this.$store.commit('mutations定义的函数名',参数)
        3 this.$store.state.count++
       所有组件中使用到的位置，都会变量
# 7 为什么经过 actions和mutations 
    -可以跟后端交互，可以做数据验证

# 8 getters：
        可以通过getters获取数据--》对state中的数据，再做处理
    
# 9 modules：
        分到不同模块中，不同模块有自己的state，actions

----------------------------------------------------------
HomeView

<template>
  <div class="home">
    <GoodList/>
    <hr>
    <ShoppingCar/>
  </div>

</template>

<script>
import GoodList from "@/components/GoodList.vue";
import ShoppingCar from "@/components/ShoppingCar.vue";

export default {
  name: 'HomeView',
  components: {
    GoodList,ShoppingCar
  }
}
</script>

---------------------------------------------------------
GoodList

<template>
<div class="good">
<p>商品名：笔记本电脑---价格：4000---》<button @click="handleAdd">加入购物车</button></p>
<p>商品名：平板电脑---价格：2500---》<button @click="handleAdd">加入购物车</button></p>
<p>商品名：手机---价格：6000---》<button @click="handleAdd">加入购物车</button></p>
</div>
</template>



<script>
export default {
  name: 'GoodList',
  methods:{
    handleAdd(){
      //1.直接操作变量
// this.$store.state.count++

      //2.借助于action,触发dispatch方法
      // this.$store.dispatch('addCount',1)

      //3.借助于mutation,触发commit方法,用这个
      this.$store.commit('addOne',1)
    }
  }
}
</script>

------------------------------------------
ShoppingCar

<template>
  <div class="shoppingcar">
    <div>
      <span>商品数量：{{$store.state.count}}</span>
    </div>
  </div>

</template>


<script>

export default {
  name: 'ShoppingCar',

}
</script>

 

 。

。

。

【vue-router】

 

# 1 安装
    cnpm install -S vue-router
    
# 2 写router/index.js
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import HomeView from '../views/HomeView.vue'
    Vue.use(VueRouter) # 使用插件

    const routes = [
      {
        path: '/',
        name: 'home',
        component: HomeView
      },


    ]

    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })

    export default router
# 3 使用了vue-router插件后
    -html：全局组件：
        -<router-view></router-view>  # 显示页面组件
        -<router-link></router-link>  # 路由跳转【相当于a标签】
    -js中：
        this.$router  # 路由对象，路由跳转
        this.$route   # 当前路由对象，跳转携带数据，从这里取出来

# 4 如果访问某个路径，显示某个组件
    # App.vue中
      <div id="app">
        <router-view></router-view>
      </div>
       # router/index.js的routes注册路由

<template>
  <div class="home">
    <h1>Home</h1>
<!--    方式一-->
    <button @click="handleTo">点我跳转到about--js跳转</button>
    <hr>
<!--    方式二:路由跳-->
<!--    <router-link to="/about">-->
<!--       <button >点我跳转到about&#45;&#45;js跳转</button>-->
<!--    </router-link>-->

<!--    方式三：变量-->
    <router-link :to="{name:'about'}">
       <button >点我跳转到about--js跳转</button>
    </router-link>

  </div>

</template>

<script>

export default {
  name: 'HomeView',
  methods:{
    handleTo(){
      console.log(this.$router)
      //1 路径
      // this.$router.push('/about')
      //2 对象:根据名字或是路径
      // this.$router.push({name:'about'})
      this.$router.push({path:'/about'})
    }
  }
}
</script>

 

【本地存储】

# 登录成功---》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>