[JavaScript知识库]Vue核心插件之vue-router、Vuex

vue-router 前端路由

一.使用步骤

1.安装

npm install --save vue-router@3 //搭配vue2,??如果是vue3则需要搭配vue-router@4

2.路由跳转 demo

main.js
import rt from './router/index.js'
new Vue({
  render: h => h(App),
  router: rt, //注入,
}).$mount('#app')

新建目录router，文件index.js

index.js
import HelloWorld from '../components/HelloWorld'
import HelloEarth from '../components/HelloEarth'
import router from 'vue-router'
import Vue from 'vue'

Vue.use(router)
//配置路由
export default new router({
    routes: [{
        path: "/world", //指定要跳转的路径
        component: HelloWorld,//指定要跳转的组件
    }, {
        path: "/earth",
        component: HelloEarth,
    }]
})

App.vue
<template>
  <div id="app">
    <list/>
    <router-view></router-view> //视图加载的位置 
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import list from './components/list.vue'
export default {
  name: 'App',
  components: {
    HelloWorld,
    list
  }
}
</script>

list.vue
<template>
  <div class="hello">
    <ul>
        <li>
           <router-link to="/world"> world</router-link>
        </li>
        <li>
           <router-link to="/earth">earth</router-link>
        </li>
    </ul>
  </div>
</template>

HelloWorld.vue: <h1>earth</h1>

HelloEarth.vue: <h1>world</h1>

二.路由参数的传递

1.必须在路由内加入name，必须在path后加/:和要传递的参数
2.传递参数
3.读取参数：$route.params.XXX

index.js
export default new router({
    routes: [{
        name: 'world', //传递路由参数
        path: "/world/:msg", 
        component: HelloWorld,
    }, {
        name: 'earth',
        path: "/earth/:msg2",
        component: HelloEarth,
    }]
})

list.vue
<li><router-link :to="{name:'world',params:{msg:'你好'}}"> world</router-link></li>
<li><router-link :to="{name:'earth',params:{msg2:'你好2'}}">earth</router-link></li>      

HelloWorld.vue
读取参数：{{$route.params.msg}}
HelloEarth    
读取参数：{{$route.params.msg2}}

Vuex

一.Vuex.Store(拿状态)

用来管理状态，共享数据，在各个组件之间管理外部状态。
例如，多个组件展示相同的数据

使用方法
1.安装

npm install vuex@3.0.0 //搭配vue2,??如果是vue3则需要安装vuex@v4.x

2.注入

main.js
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({ //创建状态仓库
  state: { num: 10 }
})
new Vue({
  render: h => h(App),
  store, //注入
}).$mount('#app')

注意Store、state不可更改！

3.使用
多个组件都可以通过this.$store.state.xxx拿到数据

son.vue

<template>
  <div> {{getNum}} </div>
</template>
<script>
export default{
  computed:{
     getNum(){
        return this.$store.state.num; //拿数据
     }
  }
}
</script>

parent.vue
//同上，略

二.mutations、actions(改状态)

Vuex常用选项state、mutations、actions、getters

拿到状态之后，我们又需要实时的去改变它，那如何改状态呢?
1’ 用mutation
2’ 用actions

2种方法的区别：actions提交的是mutation,而不是直接变更状态。
actions`可以包含异步操作，但mutation只能包含同步操作。

如何使用
1.先定义

main.js
const store = new Vuex.Store({
  state: {
    num: 0
  },
// 1'mutations
  mutations: { //1.定义状态改变函数
    increase(state) { state.num++ },
    decrease(state) { state.num-- }
  },
// 2'actions
  actions: {
    decreaseAction(context) { 
      context.commit('decrease') //??调用mutations的方法
    }
  }
})

2.再使用
1’ mutations

//parent.vue
<button @click="add"> 改变状态 </button>
<button @click="decrease"> 改变状态 </button>
export default{
  methods:{
   add(){ 
      this.$store.commit('increase') //调用方法
   },
   decrease(){ 
      this.$store.commit('decrease') //调用方法
   }
  }
}  

2’ actions

son.vue
<button @click="decreaseAction">改变状态:action</button>
export default{
  methods:{
    decreaseAction(){
      this.$store.dispatch('decreaseAction') //2.调用方法
    }
  }
}

异步操作只能用actions

main.js
actions: {
    decreaseAction(context) {
      setTimeout(function () { //异步操作
        context.commit('decrease')
      }, 1000)
    }
  }

三.getters(处理状态)

当< 0时就不能再减了，用getters实现

main.js
getters: {
  getNum(state) {
    return state.num > 0 ? state.num : 0
  }
}

son.vue
computed:{
  getCount(){
    return this.$store.getters.getNum 
  }
}

四.模块化

新建目录state,文件index.js

main.js
import store from './state/index'

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

index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({ //新建状态仓库
    state: {
        num: 2
    },
    mutations: { //定义状态改变函数
        increase(state) {
            state.num++
        },
        decrease(state) {
            state.num = state.num - 10
        }
    },
    actions: {
        decreaseAction(context) {
            setTimeout(function () {
                context.commit('decrease') 
            }, 1000)
        }
    },
    getters: {
        getNum(state) {
            return state.num > 0 ? state.num : 0
        }
    }
})