Vuex的使用

在Vue中實(shí)現(xiàn)集中式狀態(tài)(數(shù)據(jù))管理的一個(gè)Vue插件，對vue應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫)，也是一種組件間通信的方式，用于任意組件間的通信

state：存儲(chǔ)數(shù)據(jù)的地址

actions：中轉(zhuǎn)站，可發(fā)送異步請求增加判斷

mutations：真正改state數(shù)據(jù)的地方

Vuex的使用流程

- 第一步：在state中定義變量

- 第二步：在組件中通過 this.$store.dispatch('actions中定義的函數(shù)')，觸發(fā)actions中得函數(shù)執(zhí)行

- 第三步：在actions中的函數(shù)中，調(diào)用context.commit('mutations中定義的函數(shù)')

- 第四步：在mutations中定義的函數(shù)實(shí)現(xiàn)真正的修改state中的數(shù)據(jù)

- 第五步：頁面中只要使用$store.state.變量，變量變化，頁面就變化 實(shí)現(xiàn)了組件間的通信

?? 注意點(diǎn)：

- 在組件中可以直接調(diào)用commit觸發(fā)(mutations中定義的函數(shù))

- 在組件中可以直接修改state中定義變量

Vuex的執(zhí)行流程圖

執(zhí)行流程：

- 用戶進(jìn)行操作，通過dipatch提交一個(gè)actions

-actions接收到這個(gè)事件之后，在actions中可以執(zhí)行一些異步或者同步操作，然后根據(jù)不同的情況去分發(fā)給不同的mutations

-actions通過commit去觸發(fā)mutations

-最后mutations去更新state數(shù)據(jù)值，state更新之后，就會(huì)通知vue渲染頁面并顯示

Vuex偽代碼

   export default new Vuex.Store({
    state:{
        // 存放真正的變量，也就是數(shù)據(jù)
    },
    mutations:{
        // 修改state的數(shù)據(jù)操作
    },
    actions:{
        // 可以進(jìn)行異步同步請求，校驗(yàn)權(quán)限等操作
    }
})

Vue-router的使用

官方提供的用來實(shí)現(xiàn)SPA 的vue插件，有了它以后我們可以寫很多頁面組件，通過地址欄路徑的不同來顯示不同的頁面組件

基本使用流程

- 安裝插件：

cnpm install vue-router@4

- 在src目錄下新建router文件夾內(nèi)再創(chuàng)index.js文件用來存放路由

- 在index.js中引入插件

import Vue from 'vue'//引入vue
import VueRouter from 'vue-router'//引入vue-router路由模塊
Vue.use( VueRouter ) //使用vue-router這個(gè)第三方插件

- 創(chuàng)建了一個(gè)router對象實(shí)例并導(dǎo)出

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
]
export default router //導(dǎo)出

-入口文件main.js中引入路由實(shí)例 router

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

- 在App.vue中用一個(gè) router-view 的組件來給路由一個(gè)展示區(qū)域

<template>
  <div id="app">
    <router-view>
    </router-view>
  </div>
</template>

路由的跳轉(zhuǎn)

- 在html中使用

router-link組件：可以在不重新加載頁面的情況下更改URl處理URl的生成以及編碼

to：來指定跳轉(zhuǎn)的鏈接

<div id ="app">
    <p>
    <router-link to="/home">首頁</router-link>
    </p>
</div>

- 在js中使用

當(dāng)需要先進(jìn)行權(quán)限判斷的時(shí)候需要在js中進(jìn)行跳轉(zhuǎn)，校驗(yàn)通過跳轉(zhuǎn)刪除校驗(yàn)不通過跳轉(zhuǎn)到登陸

export default {
    Todel() {
        if (usernane) {
            this.$router.push('/del')
        }else{
            this.$router.push('/login')
        }
    }
}

攜帶參數(shù)的路由跳轉(zhuǎn)

- 在請求地址中帶參數(shù)

<div id ="app">
    <p>
    <router-link to="/login/?username=abc&password=123">用戶登陸</router-link>
    </p>
</div>

在跳轉(zhuǎn)頁面的組件中接受：

this.$route.query.username
this.$route.query.password

- 在地址中帶參數(shù)

<div id ="app">
    <p>
    <router-link to="/bookList/1">展示書籍</router-link>
    </p>
</div>

在跳轉(zhuǎn)頁面的組件中接受：

this.$route.params.

路由嵌套

關(guān)鍵字：children

在router/index.js相應(yīng)的路由中通過關(guān)鍵字進(jìn)行路由的嵌套

const routes = [
    {
        path: '/login',
        name: 'login',
        component: Login,
        children: [
            {
                name: 'books',
                path: 'books',
                component: Books
            },
]

?? 注意點(diǎn)：

- 必須要在Login組件中加<router-view></router-view>用來渲染子路由

- 只會(huì)變更login下router-view包裹的位置

路由守衛(wèi)

- 前置路由守衛(wèi)：有時(shí)候根據(jù)用戶的權(quán)限區(qū)分普通用戶訪問的接口與超級用戶才能訪問的接口，設(shè)置守衛(wèi)來區(qū)分

router.beforeEach((to, from, next) => {
    console.log('前置路由守衛(wèi)', to, from)
    if (to.name == 'shoppingcart') {
        let name = localStorage.getItem('name')
        if (name) {
            next()
        } else {
            alert('不好意思沒有權(quán)限')
        }
    } else {
        next()
    }
})

- 后置路由守衛(wèi)：用來設(shè)置跳轉(zhuǎn)后頁面標(biāo)題的名字，根據(jù)頁面組件名字設(shè)置頁面名

router.afterEach((to,from)=>{
	console.log('后置路由守衛(wèi)',to,from)
	document.title = to.name
})

到此這篇關(guān)于Vuex與Vue router的使用詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vuex與Vue router內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論