首页 > 其他分享 >Vue急速入门-6

Vue急速入门-6

时间：2023-02-27 17:04:35浏览次数：43  
标签：Vue 入门 state 急速 vue store router 路由

纯净的Vue项目

# 安装依赖
cnpm install
# 做成纯净的vue项目
-第一步：在router 的index.js 中删除about的路由
-第二步：删除所有小组件和about页面组件
-第三步：App.vue 只留
    <template>
    <div id="app">
           <router-view/>
           </div>
           </template>

补充:
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.119:8080/
终端下的这两个路由分别代表的是本机地址/网络地址

Vuex的使用

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

# Vuex的使用流程
	-state：存数据的地址
    -actions：服务员，中转站
    -mutations：厨师，真正改state数据的地方
    
# Vuex使用步骤：
    	1 在state中定义变量
        2 在组件中通过this.$store.dispatch('actions中定义的函数')，触发actions中得函数执行
        3 在actions中得函数中，调用 context.commit('mutations中定义的函数')
        4 在mutations中定义的函数实现真正的修改state中得数据
        5 页面中只要使用$store.state.变量，变量变化，页面就变化  实现了组件间通信
		6 注意：
        	-在组件中可以直接调用commit触发【mutations中定义的函数】
            -在组件中可以直接修改state中定义变量
            
# Vuex使用示例：
1 安装，新建store/index.js

2 在index.js 中写
        export default new Vuex.Store({
            state: {
                # 放数据
            },

            mutations: {
                # 放方法，正常是让actions中来调用
                # 组件也可以直接调用

            },
            actions: {
                # 放方法，正常组件调用
            }
        })
        
3 在组件中
    	-显示state的变量
        html中：
          {{$store.state.变量名}}
        js中：
        	this.$store.state.变量面
        改state中的值
        
    -推荐按正常步骤：
        1. this.$store.dispatch('actions中的方法',参数)
        2.actions中的方法调用context.commit('mutations',参数)
        3.在mutations中直接修改state的值
    
    -也可以跨过任何一步，直接使用commit或者直接修改state:
        this.$store.commit()
        this.$store.state.变量名

vuex的执行流程图

从左边的Vue Components（Vue组件）开始看。
Backend API：后端接口
Devtools：在浏览器可以装一个Vue调试插件。可以看到Vue组件。
VueX有三个状态Actions，Mutations，State。
在组件的数据通过调用dispatch放入Vuex状态管理器，进入actions状态，在actions状态调用commit，进入Mutations状态，在Mutations调用Mutate实现真正的修改数据。
比如组件向修改一个变量的数据，需要先通过actions的逻辑判断，判断当前组件是否允许修改数据。actions可以向后端发请求，判断当前用户是否有权限。
在一些情况下，Vue组件可以跨过Actions状态，直接通过Mutations修改数据。
image.png

image.png

Vuex的使用

由于我们创建项目的时候自动安装了Vuex，所以会有一个store文件，在此文件夹下有index.js查看其代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

在main.js注册
image.png

补充，在main.js这个vue对象中传入store:"xiaoming"属性
在根组件 created方法 打印this

image.png
总结：也就是说在main.js里的这个Vue对象里添加的属性，以后再任意组件中都可以通过$属性名的方式获取。
所以Vuex就是将自己的对象放入了$store供所有组件使用（this.$store）：

而这个对象，就是从store/index.js导出的那个对象：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

数据交互方式:

image.png

state：真正存数据的
mutations：修改state的地址 state.变量名，修改即可
actions：判断，跟后端交互，调用mutations的地方  context.commit

如何查看组件中State的变量:

我们可以在组件中显示state的变量
html中：
	{{$store.state.变量名}}
js中：
	this.$store.state.变量名

如何更改state中的值：

推荐按正常步骤
1. this.$store.dispatch('actions中的方法',参数)
2. actions中的方法调用 context.commit('mutations',参数)
3. 在mutations中直接修改state的值             
可以跨过任何一步（但最好按照流程编写）             	
    this.$store.commit() 
    this.$store.state.变量名

VueRouter

  • Router:官方提供用来实现spa的 vue插件
  • 实现了单页面应用,就是在一个index.html中页面切换有跳转效果
  • 本质上是做了路由的控制

基础使用
创建vue项目时，自定义选项选择了Router即可直接使用Router
如果之前没有安装的话:

npm install vue-router --save

在项目中创建router包，写个index.js，把下方的代码copy过来

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
  },
// 以后添加路由，就是模仿上面的home写对象，导入vue文件，更改路由路径，然后写上对应的vue文件名称
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  // 这里跟我们创建时候的配置选项有关，有一个地方询问我们是否开始这个历史模式，还有一个配置是询问我们项目依赖在哪个位置
  routes
  // 这就是我们上面定义的存储路由信息的数组
})

export default router
// 这里我们把VueRouter产生的对象导出

main.js中也需要进行注册:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

路由需要有对应的vue视图组件进行搭配！

路由跳转两种方式
<router-link>   跳转用    
<router-view/>  替换页面组件用

我们可以在app.vue中看到,之前我们也介绍过它们的作用

// 点击跳转路由两种方式
js控制
this.$router.push('路径')
标签控制
  <router-link to="/home">
  <button>点我跳转到home页面</button>
  </router-link>

js控制实现登录跳转代码

<template>
  <div>

    <button @click="goLogin">点我跳转到登录</button>

  </div>
</template>

<script>


export default {
  name: 'HomeView',
  data() {
    return {
      obj: {name: 'login', query: {name: 'xiaoming'}, params: {id: 999}}
    }
  },
  methods: {
    goLogin() {
      // js 控制的跳转 ,跳转到login页面
      this.$router.push('/login/')
    }
  },
}
</script>
代码 作用
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由

标签控制实现路由跳转

<template>
  <div>

    <router-link :to="/login">
      <button>点我跳转到登陆页面</button>
    </router-link>
   
   </div>
</template>

<script>


export default {
  name: 'HomeView',
  data() {
    return {
      obj: {name: 'login', query: {name: 'xiaoming'}, params: {id: 999}}
    }
  },
}
</script>

区分this.$route this.$router

#4 区分this.$route  this.$router
    -this.$router #   new VueRouter对象，实例，可以实现路由的跳转
    -this.$route  #   是当前路由对象，内部有传入的参数

image.png

路由跳转,携带数据的两种方式

/course/?pk=1  带在路径中使用 ? 携带 数据 
/course/1/     路径中分割的数据

我们可以使用对象来携带参数
js控制实现路由跳转

  • 第一种方式：/course/?pk=1（这样进行路由跳转，路由会变成这样）
      this.$router.push({
        name: 'login',
        query: {
          name: 'lqz',
          age: 19
        },
          })
  • 第二种方式：/course/1/ （这样进行路由跳转，路由会变成这样）
      this.$router.push({
        name: 'login',
        params: {
          id: 88
        }
      })

标签实现路由跳转

我们可以在标签上把to这里设置成属性指令，让他传入一个对象，在对象中携带数据
规律也是跟上面js跳转一样的，携带了params的跳转需要在路由层更改路由，
没有携带params的跳转会用？号在路由后面携带数据

监听属性/计算属性

computed 的配置项中编写计算属性
	配置项中的写法：
计算属性需要在setup中导入
let fullName = computed(()=>{return firstName+lastName})

计算属性可以改值
let fullName = computed(()=>{return firstName+lastName})
set(newValue){
            
        }
    })
监听属性
	配置项写法:
-要写在setup中，函数，导入用
watch(变量,()=>{
    #变量发生变化就会执行箭头函数
})
watchEffact(()=>{
    #使用变量发生变化，这里就会执行
})

生命周期

# Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
-     vue2                         vue3       
    beforeCreate  	 ===>	    beforeCreate
    created       	 ===>	    created
    beforeMount 	 ===>	    beforeMount
    mounted	         ===>		mounted
    beforeUpdate	 ===>	    beforeUpdate
    updated 		 ===>       updated
    beforeDestroy 	 ===>		beforeUnmount
    destroyed 		 ===>	    unmounted
    
    beforeDestroy ===改名为===>  beforeUnmount
    destroyed     ===改名为===>  unmounted
    
# Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
        beforeCreate	===>	setup()
        created		    ===>	setup()
        beforeMount 	===>	onBeforeMount
        mounted		    ===>	onMounted
        beforeUpdate	===>	onBeforeUpdate
        updated 	    ===>	onUpdated
        beforeUnmount   ===>	onBeforeUnmount
        unmounted 	    ===>	onUnmounted
        
# 以前写在created中的代码，现在直接写在setup开始即可
 let show = ref(false)
 axios.get().then(res=>{
      show.value=res.data.show
 })

toRefs

相当于解压赋值的感觉

# 以后setup的返回值可以直接使用
  setup() {
    let data = reactive({
      name: 'xiaoming',
      age: 19,
      gender: '男'
    })
    return {...toRefs(data)}
  }
# 以后在模板中直接用  {{name}}

export default {
  name: 'App',

  setup() {
    let data = reactive({
      name: 'lqz',
      age: 19,
      isShow: true
    })

    function handleShow() {
      console.log('ssdaf')
      data.isShow = !data.isShow
      data.age++
    }

    return {
      ...toRefs(data),
      handleShow
      // data
    }

  }
}

标签：Vue,入门,state,急速,vue,store,router,路由
From： https://www.cnblogs.com/ddsuifeng/p/17160363.html

相关文章

  • Vue3开发效率总结
    https://zhuanlan.zhihu.com/p/601715098依赖注入依赖注入：将实例变量传入到一个对象中去在Vue中父组件中声明依赖，将他们注入到子孙组件实例中去，很大程度上代替全局状态......
  • Vue2之v-model双向绑定原理
    一、简介v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定.二、表单实现双向绑定1.原理分两步骤v-bind绑定一个value属性v-on指令给当前元素绑定inp......
  • npm安装@vue/cli报错原因之一
    @目录最终解决方案为：使用cnpm下载vue-cli，下面是我的问题和解决方法，可以供你借鉴起初安装过程中报错为这个npmWARNdeprecated@hapi/[email protected]:Thisversionhasbee......
  • vue 运行步骤（使用cnpm）
    运行教程首先，列出来我们需要的东西：node.js环境（npm包管理器）vue-cli脚手架构建工具cnpmnpm的淘宝镜像从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以......
  • vscode跟踪vue代码方法
    首先安装插件同时打开上面的右边的齿轮图标，就是打开文件launch.json{//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsof......
  • vue中解决一个部门不能选择的问题
    问题如下：就是在提交流程进行表单申请的时候，上面按用户选择的时候出现下面界面 结果最下面两个用户与按钮都按不了，不知道是什么原因。后来跟踪发现下面问题这个层面上面都......
  • vuex中commit和dispatch的区别
    一直都没整明白commit和dispath的区别，今天总算整明白了1、commit和dispatch的区别commit和dispatch的区别在于commit是提交mutatious的同步操作，dispatch是分发actions的......
  • Vue虚拟dom是如何被创建的
    先来看生成虚拟dom的入口文件:...import{parse}from'./parser/index'import{optimize}from'./optimizer'import{generate}from'./codegen/inde......
  • 2023前端一面vue面试题合集
    函数式组件优势和原理函数组件的特点函数式组件需要在声明组件是指定functional:true不需要实例化，所以没有this,this通过render函数的第二个参数context来代替没有生......
  • Vue组件是怎样挂载的
    我们先来关注一下$mount是实现什么功能的吧：我们打开源码路径core/instance/init.js:exportfunctioninitMixin(Vue:Class<Component>){......initLifec......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99