首页 > 其他分享 >vue学习笔记

vue学习笔记

时间:2022-11-01 21:48:55浏览次数:96  
标签:vue 笔记 学习 state 组件 router Vuex 路由

今日内容概要

  • Vuex的使用
  • Vue-router的使用

今日内容详细

Vuex的使用

Vuex:vue的插件,增强了vue的功能。在vue中实现集中式状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任何组件间通信。

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

#引入Vue核心库
   import Vue from 'vue'
#引入Vuex
   import Vuex from 'vuex'
#应用Vuex插件
   Vue.use(Vuex)

state:保存具体的数据
actions:服务员,中转站,响应组件中用户的动作
mutations:真正修改state数据的地方

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

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

使用步骤:

1. 在state中定义变量
2. 在组件中通过this.$store.dispatch('actions中定义的函数'),触发actions中的函数执行
3. 在actions中的函数中,调用context.commit('mutations中定义的函数')
4. 在mutations中定义的函数实现真正的修改state中的数据
5. 页面中只要使用$store.state.变量,变量变化,页面就变化,实现了组件间通信

注意:
    在组件中可以直接调用commit触发【mutations中定义的函数】。
    在组件中可以直接修改state中定义变量。

代码演示:

import Vue from 'vue'
import Vuex from 'vuex' // 安装过了,直接导入
import state from "@/store/state";
Vue.use(Vuex)  // 使用Vuex插件

export default new Vuex.Store({
    // 真正的存变量
    state: {age:19,shoppingNum:0},
    mutations: {
        ADD(state, num) {
            console.log('###', num)
            state.age+=num
        },
        addShoppingCart(state,obj){
            state.shoppingNum+=1
        }
    },
    actions: {
        add(context, num) {
            //第一个参数传入contex,内部有 commit和dispatch
            //调用dispatch会触发actions中函数执行
            console.log('---', context, num)

            //调用commit会触发【mutations】中函数执行
            // 在这里发送axios请求去后端(token:放在cookie中),查询是否有权限,如果有再改值
            // cookies.get()
            // axios.get('').then(res=>{
            //     // 如果有权限
            // })
            context.commit('ADD',num)
            // context.dispatch()
        },
        addShoppingCart(context,obj){
            context.commit('addShoppingCart')
        }
    },
})

vuex的执行流程图:

image

Vue-router的使用

官方提供的用来实现SPA 的vue 插件:有了它以后,我们可以写很多页面组件,通过地址栏不同的路径显示不同的页面组件。

github: https://github.com/vuejs/vue-router

中文文档: http://router.vuejs.org/zh-cn/

下载: npm install vue-router --save

基本使用:

# 使用步骤
1. 新建router/index.js
    import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter)
    const routes = [配置路由1,配置路由2]
2. main.js中使用
   import router from './router'
        new Vue({
            ...
              router,
            ...
            }).$mount('#app')
3. 只需要写页面组件,配置路由即可
4. 在App.vue中加入
    <router-view>

    </router-view>
5. 在浏览器访问const routes中配置的路径,就能看到对应的页面组件了

路由的跳转

在html中使用
    <router-link :to="path">去登录</router-link>
在js中使用
    this.$router.push('goods')

路由跳转携带参数

# 两种情况
-带在请求地址中以 ?name=lqz&age=19
-在地址中类似于django的分组  /goods/1/

# 情况1:请求地址中
-<router-link to="/login/?name=lqz&age=19">去登录</router-link>
-组件中接受:this.$route.query.取

# 情况2:地址中
-<router-link to="/login/lyf">去登录</router-link>
-组件中接受:this.$route.params.取

路由嵌套

# 使用步骤:
1 router/index.js 相应的路由中
  {
      path: '/goods',
      name: 'goods',
      component: Goods,
      children: [
          {
              path: 'list',
              component: GoodList
          },
          {
              path: 'detail',
              component: GoodDetail
          }
      ]
  },
2 必须要在Goods组件中,写<router-view></router-view>
3 使用router-link标签跳转
4 只会变更Goods下router-view包裹的位置

路由守卫

# 对路由进行权限控制

# 前置路由守卫
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)

    if (to.name == 'shoppingcart') {
        let name = localStorage.getItem('name')
        if (name) {
            next()
        } else {
            alert('不好意思没有权限')
        }
    } else {
        next()
    }
})

# 后置路由守卫
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.name
})

标签:vue,笔记,学习,state,组件,router,Vuex,路由
From: https://www.cnblogs.com/wwjjll/p/16849250.html

相关文章

  • JavaScript笔记 - JS和html代码的结合方式
    JavaScript和html代码的结合方式方式一在head标签或body标签中,使用script标签来书写JavaScript代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF......
  • Javascript笔记 - JS中的变量
    变量目录变量1.变量基础2.强制类型转换3.关系运算1.变量基础JS是一门弱类型语言,这意味变量的类型不是固定的,变量可以随时从一种类型转换为另一种类型vari=1;......
  • vuex的使用
    目录一、Vuex的使用Vuex的介绍:vue的插件,增强了vue的功能Vuex的使用流程vuex的执行流程二、Vue-router的使用介绍基本使用步骤路由的跳转路由跳转携带参数路由嵌套步骤路由......
  • Vue插件
    Vue插件Vuex的使用vuex的作用是vue的插件,增强了vue的功能在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一......
  • Javascript笔记 - JS中的对象
    对象目录对象1.对象的声明与定义2.原型对象3.枚举对象中属性特殊属性值in运算符hasOwnProperty方法for...in语句1.对象的声明与定义显式声明对象并逐个定义属性......
  • VUE
    Vue快速入门文档可以使用全文为Vue2.0版本学习笔记!!!3.0版本请参考文末。判断-循环●if●for事件●on网络通信●jQuery.ajax()1.前端核心分析1.Vue概述V......
  • 今日内容 Vuex 和Vue-router的使用
    Vuex的使用作用vue的插件,增强了vue的功能  在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信......
  • HTML笔记 - HTML中表单标签的使用
    HTML中表单标签的使用目录HTML中表单标签的使用1.表单标签2.表单的提交3.表单的格式化1.表单标签form标签表示表单inputtype效果设置text文件输入框......
  • vue中key有什么作用(key的内部原理)
    虚拟DOM的key的作用:key是虚拟DOM对象的标识,当状态中的数据发生变化的时候,vue会根据新的数据生成新的虚拟DOM,随后vue进新虚拟DOM与旧虚拟DOM的差异比较(1)旧虚拟......
  • Linux学习笔记(第六篇)Vi编辑器
    ​​Linux学习笔记(第零篇)计算机基础​​Linux学习笔记(第零篇)Linux文件系统及ShellLinux学习笔记(第一篇)零散命令Linux学习笔记(第二篇)目录操作命令Linux学习笔记(第三篇)文件操......