vue-router和vuex入门笔记

vue-router和vuex是官方提供的vue插件，主要解决路由和状态管理两个问题

vue-router笔记

vue-router基本概念

vue-router解决路由与组件的对应关系。

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

vue-router的基础使用方法

1.安装vue-router依赖

npm i -S vue-router

2.使用vue-router插件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.初始化vue-router对象

const routes = [
{ path: '/a' component: A },
{ path: '/b' component: B },
{ path: '/hello-routes', component:helloroutes  }
]
const router = new Route({
    routes
})

注：这里省略了定义A组和B组的过程，这两个组件与普通组件无异

4.实例化vue对象，传入router参数

new Vue({
    router,
    render:h =>(App)
})

5.使用router-view和router-link

router-view和router-link是vue-router官方提供的两个组件，router-view会替换为路由对应的组件，router-link相当于a标签，点击会加载to属性中路由对应组件

   

      

        a
      
      

        b
      
      

        helloroutes
      
    

路由嵌套

上面是一个非常简单的vue-router case，实际项目开发过程中，需求往往不会这么简单，比如我们希望实现/a/aa路由，并且/aa对应的组件嵌套在/a之下，这时我们需要修改路由的配置文件：

const routes =[{
    path:'/a',
    component:A,
    redirect:'/a/aa',
    children:[
    {
    path:'/a/aa',
    component:AA,
    }]
}]

并修改A组件的内容：

由于A组件是父级路由，所以也需要添加router-view组件，动态匹配子路由

重定向

将一个路由重定向到另一个路由，实际开发过程中非常实用，修改配置文件即可：

const routes = [{
    path:'/a',
    component:A,
    redirect:'/a/aa',
    children[{
    path:'/a/aa',
    component:AA,
    }]
}]

动态路由

为了支持restful形式路由以及更复杂的场景时，我们可以使用动态路由和定义路由时，在路由前加上冒号即可，我们先添加AA2组件，动态路由部分通过this.$route.params进行接收：

修改路由配置后生效：

const routes = [
  {
    path: "/a",
    component: A,
    redirect: "/a/aa",
    children: [
      {
        path: "/a/aa",
        component: AA,
      },
      {
        path: "/a/:id",
        component: AA2,
      },
    ]
  }
]

动态路由的优先级低于普通路由，所以我们访问/a/aa时会匹配到AA组件，而输入其它路由时会匹配到AA2组件

路由参数

参数传递是我们开发过程中必不可少的步骤，vue-router支持参数传递，通过this.$route.query进行接收，我们修改AA组件进行测试

编程式路由

有很多时候我们需要手动操作路由的跳转，这时我们需要使用this.$router,以下是一些常用的操作:

1.路由跳转

this.$router.push('/a/aa')

2.带参数路由跳转

this.$router.push({
    path:'/a/aa',
    query:{
    message:'321'
    }
})

3.不同history插入记录

this.$router.replace{'/a/123'}

4.回退

this.$router.go(-1)

vuex笔记

vuex基本概念

vuex解决了状态管理问题，通过集中管理状态，使得state、action和view实现松耦合，从而让代码更容易维护。

• state：驱动应用的数据源。
• actions：响应在 view上的用户输入导致的状态变化。
• view：以声明方式将 state映射到视图。
  
  “单向数据流”理念示意图

vuex的基本使用方法

1.安装vuex依赖

npm i -S vuex

2.使用vuex插件

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

Vue.use(Vuex)

3.初始化vuex对象

const store = new Vuex.Store({
    state:{
    data:'我是测试'
    },
    mutations:{
    SET_DATA(state,data){
    state.data=data
    }
    },
    actions:{
    setData({commit},data){
    commit('SET_DATA',data)
    }
    }
})

4.实例化vue对象，传入store参数

new Vue({
    render:h =>h(app),
    router,
    stare
})

5.读取vuex状态

{{$store.state.data}}

6.更新vuex状态

update(){
    this.$store.dispatch('setData','这是测试二')
}

vuex模块化

实际项目开发中，状态众多，如果全部混在一起，则难以分辨，而且容易互相冲突，为了解决问题，vuex引入模块化的概念，解决这个问题，下面我们定义a和b两个模块：

const moduleA = {
  state: {
    data: "我是a",
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data;
    }
  },
  actions: {
    SETdATA({ commit }, data) {
      commit("SET_DATA", data);
    }
  }
};
const moduleB = {
  state: {
    data: "我是b",
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data;
    }
  },
  actions: {
    setData({ commit }, data) {
      commit("SET_DATA", data);
    }
  }
};

修改store的初始化代码：

const store = new Vuex.Store({
    modules:{
    a:moduleA,
    b:moduleB
    }
})

修改获取状态的代码，此时需要加入模块进行区分：

{{$store.state.a.data}}
{{$store.state.b.data}}
按钮a
按钮b

修改update方法：

update(abc){
    this.$store.dispatch('setDate','update ${abc}')
}

vuex命名空间

上述代码在执行过程中，获取状态没有问题，但是修改状态会出现问题，因为两个模块出现同名actions，所以此时需要使用命名空间来解决这个问题：

const moduleA = {
    namespaced:tue,
    //...
}

修改update方法：

update(abc){
    this.$store.dispatch('$(abc)/setData', 'update $(abc)')
}