• 六十八、vue高级

    vue高级

    一 Vuex

    1.1 Vuex介绍

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

    在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

    Vuex的执行流程图：
    在这里插入图片描述

    1.2 Vuex的环境搭建

    1. 安装
      npm install vuex --save

      • 1
    2. 创建一个 store文件夹，在store下创建一个index.js文件
    3. index.js中写下面代码
      import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
  },
  getters: {
  },
  mutations:{
  },
  actions:{
  },
  modules: {
  }
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
    4. 也可使用导入导出，逻辑代码多了就不会冗余。
      单独创建js文件，导出对象
      import Vue from 'vue'
import Vuex from 'vuex'
import actions from '@/store/actions'
import mutations from '@/store/mutations'
import state from '@/store/state'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

    1.3 简单使用

    1. 在state中定义变量

      state.js

      export default {
    count: 0
}

      • 1
      • 2
      • 3

    2. 使用组件对象的$store里的dispatch方法，传入两个参数，第一个是actions对象里的方法名，字符串格式。（也可以直接执行commit方法，但是不建议）
      在这里插入图片描述
      App.vue

      <template>
  <div id="app">
    {{ $store.state.count }}
    <p>
      <button @click="andOne">点击数字+1button>
      <button @click="downOne">点击数字-1button>
    p>
  div>
template>

<script>
export default {
  created() {
    console.log(this)
  },
  methods: {
    andOne() {
      // 点击+1按钮就会执行actions对象里的add方法
      this.$store.dispatch('add')
    },
    // 点击-1按钮就会执行actions对象里的downOne方法
    downOne() {
      this.$store.dispatch('downOne')
    }
  },
}
script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27

    3. 在actions对象中写add方法和downOne方法

      export default {
    add(context) {
        console.log(context)
        context.commit('add')
    },
    downOne(context) {
        context.commit('downOne')
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

      接收到的context是一个对象，里边有commint方法。
      在这里插入图片描述

    4. 用context对象调用mutations对象里的add和downOne方法。

      export default {
    add(state) {
        console.log(state)
        state.count += 1
    },
    downOne(state) {
        state.count -= 1
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

      接收到的state是一个对象，里边有state属性，在这里就可以修改数据了。
      在这里插入图片描述

    5. 插值只需要用 $store.state.count 即可
      在这里插入图片描述

    注意：也可直接使用$store.state.count进行数据修改，但又多层可以加很多逻辑代码。

    二 Vue-router

    2.1 基本使用

    需要写页面组件，配置路由即可。

    views/Home.vue

    <template>
  <div id="app">
    <h1>Apph1>

    <router-view>router-view>
  div>
template>


<script>
export default {
  created() {
    console.log(this)
  }
}
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    views/Goods.vue

    <template>
  <div>
    <h1>商品首页h1>
  div>

template>

<script>
export default {
  name: "Goods"
}
script>

<style scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    views/Login.vue

    <template>
  <div>
    <h1>Login页面h1>
  div>
template>

<script>
export default {
  name: "Login"
}
script>

<style scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在router/index.js里配置路由

    import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/Home";
import Login from "@/views/Login";
import Goods from "@/views/Goods";

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/Goods',
        name: 'goods',
        component: Goods
    },
    {
        name: 'login',
        path: '/login',
        component: Login
    },
]

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

export default router


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    App.vue加router-view标签

    <template>
  <div id="app">
    <h1>Apph1>

    <router-view>router-view>
  div>
template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在浏览器访问const routes中配置的路径，就能看到对应的页面组件了

    2.2 路由的跳转

    <template>
  <div>
    <h1>Home页面h1>
    
    
    <router-link to="login">去登陆router-link>
    <button @click="goShopping">去购物button>
  div>
template>

<script>
export default {
  name: "Home",
  created() {
    console.log(this)
  },
  methods: {
    goShopping() {
      //在js中跳转
      this.$router.push('/goods')
      //window对象跳转
      //window.location.href='/goods'
    }
  }
}
script>

<style scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    2.3 路由跳转携带参数

    <template>
  <div>
    <h1>商品首页h1>
  div>

template>

<script>
export default {
  name: "Goods",
  created() {
    console.log(this.$route.params)
  }
}
script>

<style scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这里插入图片描述
    在这里插入图片描述
    总结：在请求地址中通过?key=value的形式从this.$route.query中取值，

    	// goods的路由配置
    {
        path: '/goods/:id',
        name: 'goods',
        component: Goods
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    以分组的形式传入数据从this.$route.params中取值。

    2.4 路由嵌套

    使用步骤：

    1. 在router/index.js 相应的路由中加入children配置。
      import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/Home";
import Login from "@/views/Login";
import Goods from "@/views/Goods";
import List from "@/views/List";
import Detail from "@/views/Detail";

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/goods',
        name: 'goods',
        component: Goods,
        children: [
            {
                name:'list',  // 不要加/
                path: 'list',
                component: List
            },
            {
                name:'detail',
                path:'detail',
                component:Detail
            }
        ]
    },
    {
        name: 'login',
        path: '/login',
        component: Login
    },
]

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

export default router

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
    2. 在Goods 组件中添加router-view标签进行渲染和router-link标签进行跳转
      <template>
  <div>
    <h1>商品首页h1>
    <router-link to="/goods/list">去listrouter-link>
    <hr>
    <router-link to="/goods/detail">去detailrouter-link>
    <router-view>router-view>
  div>

template>

<script>
export default {
  name: "Goods",
  created() {
    console.log(this)
  }
}
script>


<style scoped>

style>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24

    嵌套组件只会变更父组件中router-view标签中的内容
    在这里插入图片描述

    2.5 路由守卫

    前置路由守卫
    在router里的index.js中的router实例有一个方法beforeEach，是在路由去之前执行的函数。

    router.beforeEach((to, from, next) => {
    console.log(to)
    console.log(from)
    console.log(next)
    // 需求：登陆后向localstorage存一个data数据，访问购物地址需要有data数据才能访问
    if(to.name=='goods'){
        if(localStorage.getItem('data')){
            next()
        }else{
            alert('没有权限')
        }
    }else{
        next()
    }

})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    to参数是要跳转到什么地方。
    from参数是从哪里来。
    next参数是一个函数，next加上to才会跳转成功。

    在这里插入图片描述
    后置路由守卫
    router实例的afterEach，是在跳转成功之后执行的

    router.afterEach((to, from) => {
    console.log(to)
    console.log(from)
    // 跳转成功修改浏览器的title
    document.title = to.name
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

  • 相关阅读:
    基于PHP的汉服文化交流平台毕业设计源码240903
    Web服务（03）——HTTP协议
    数据管理能力成熟度评估模型是什么
    软件UI自动化测试应该怎么做?对软件产品起到什么作用?
    一文了解 Go time 包的时间常用操作
    使用gstreamer,rtsp拉流，保存图像， jeston，使用硬件加速nvdec/nvenc
    JAVA计算机毕业设计电子病历系统Mybatis+系统+数据库+调试部署
    力扣：343. 整数拆分
    多个JSON文件中目标Key值检索
    【C++】day4学习成果：仿写string类等等
  • 原文地址：https://blog.csdn.net/weixin_68531269/article/details/127637641