Vuex,Vue-router

目录

Vuex介绍

Vuex的执行流程图：​编辑

 Vuex环境搭建

Vue-router

路由嵌套

路由守卫

vue-router路由使用

Vuex介绍

Vuex是一个专门为Vue.js应用程序开打的状态管理模式。 它采用集中式存储管理应用的所有组件的状态， 并以相应的规则保证状态以一种可以预测的方式发生变化， Vuex也集成到Vue的官方调试工具

devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

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

Vuex的执行流程图：

 Vuex环境搭建

1. 安装

npm install vuex --save

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: {
  }
})

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.在state中定义变量

state.js

export default {
    count: 0
}

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

 App.vue

<template>
  <div id="app">
    {{ $store.state.count }}
    <p>
      <button @click="andOne">点击数字+1button>
      <button @click="minusOne">点击数字-1button>
    p>
  div>
template>
 
<script>
export default {
  created() {
    console.log(this)
  },
  methods: {
    andOne() {
      // 点击+1按钮就会执行actions对象里的add方法
      this.$store.dispatch('add')
    },
    // 点击-1按钮就会执行actions对象里的downOne方法
    minusOne() {
      this.$store.dispatch('minusOne')
    }
  },
}
script>

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

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

接收到的context是一个对象，里边有commint方法。

 用context对象调用mutations对象里的add和minusOne方法。

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

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

 插值只需要用 $store.state.count 即可

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

Vue-router

基本使用

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

views/Home.vue

<template>
  <div id="app">
    <h1>Apph1>
 
    <router-view>router-view>
  div>
template>
 
 
<script>
export default {
  created() {
    console.log(this)
  }
}
script>

view/Goods.vue

<template>
  <div>
    <h1>商品首页h1>
  div>
 
template>
 
<script>
export default {
  name: "Goods"
}
script>
 
<style scoped>
 
style>

views/Login.vue

<template>
  <div>
    <h1>Login页面h1>
  div>
template>
 
<script>
export default {
  name: "Login"
}
script>
 
<style scoped>
 
style>

在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
 

App.vue加router-view标签

<template>
  <div id="app">
    <h1>Apph1>
 
    <router-view>router-view>
  div>
template>

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

路由的跳转

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

路由跳转携带参数

<template>
  <div>
    <h1>商品首页h1>
  div>
 
template>
 
<script>
export default {
  name: "Goods",
  created() {
    console.log(this.$route.params)
  }
}
script>
 
<style scoped>
 
style>

 总结：在请求地址中通过?key=value的形式从this.$route.query中取值，

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

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

路由嵌套

1. router/index.js相应的路由中

   {
            path: '/goods',
            name: 'goods',
            component: Goods,
            children: [
                {
                    path: 'list',
                    component: GoodList
                },
                {
                    path: 'detail',
                    component: GoodDetail
                }
            ]
 
        },

2、必须在Goods组件中，写

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-router路由使用

vue-router是第三方插件，可以通过访问路由实现组件间的切换。

vue项目创建好后，在默认情况下，根路由显示的是HomeView.vue组件，/about路由显示的是AboutView.vue组件。这个就是通过vue-router实现的。

使用

1.需要在根组件(App.vue)中添加标签：默认已经添加了

<router-view/>

2.创建页面组件，一般页面组件放在views文件夹内

MyView.vue：

<template>
  <div>
    <h1>这是MyView</h1>
  </div>
</template>
 
<script>
export default {
  name: "MyView"
}
</script>
 
<style scoped>
</style>

3.然后到router文件夹-->index.js中配置路由：除了两个默认的路由，添加自己的路由

import MyView from "../views/MyView";
const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
    // 配置自己的路由
    {
        path: '/my',  // 路由地址
        name: 'my',  // 别名
        component: MyView  // 导入的组件名称
    }
]

这时候访问/my路由就会显示MyView.vue组件的内容了。

4.编写可以跳转到/my路由的标签，我这里写在App.vue内，你也可以写在其他地方。

• 方式一：在html中写

<template>
  <div id="app">
    <router-link to="/my">My</router-link>
    <router-view/>
  </div>
</template>

<template>
  <div id="app">
    <a href="/my">My</a>
    <router-view/>
  </div>
</template>

对比，避免了不必要的重渲染，它只更新变化的部分从而减少DOM性能消耗。

this.$router.push('/my')

window.location.href="/my"