目錄

一、Vuex 概述

二、Vuex的使用

1.獲取 Vuex 下 state 屬性中的變量

2.修改 Vuex 下 state 屬性中的變量

3.在 Vuex 中發(fā)送 Ajax 請(qǐng)求

一、Vuex 概述

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具?devtools extension?(opens new window)，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。

在項(xiàng)目當(dāng)中，如果組件結(jié)構(gòu)很復(fù)雜，又要跨組件傳值，這個(gè)時(shí)候使用父子傳參是很復(fù)雜的，我們需要找一個(gè)公共的區(qū)域用于存放多個(gè)組件公用的數(shù)據(jù)。而這個(gè)公共的區(qū)域就是 Vuex ，專門(mén)幫助所有組件維護(hù)共享數(shù)據(jù)。

二、Vuex的使用

創(chuàng)建腳手架項(xiàng)目時(shí)，選擇vuex選項(xiàng)，一起安裝即可。這樣在腳手架項(xiàng)目的src下store文件夾中就會(huì)自動(dòng)生成 Vuex，如下；

1.獲取 Vuex 下 state 屬性中的變量

Vuex 中的 state 屬性用于添加多個(gè)組件共享的變量，作用類似于 vue 中的data ；

如果要在頁(yè)面上顯示 Vuex 中的內(nèi)容，就需要在頁(yè)面組件?export default{ } 之前引入 Vuex 提供的專門(mén)用于獲取 state 中所有變量的函數(shù) mapState；

import { mapState } from "vuex";

隨后在頁(yè)面組件?export default{ } 中的 computed 中調(diào)用 mapState 函數(shù)，指定要解構(gòu)出來(lái)的 state 中的變量名，當(dāng)作當(dāng)前組件的計(jì)算屬性使用，舉例如下；

//Vuex中

export default new Vuex.Store({

state: {

uid: -1,

uname: "前端小馬"

},

}

//頁(yè)面組件中

computed: {

...mapState(["uname"]),

},

//頁(yè)面使用

歡迎：{{uname}}

需要注意，Vuex 中的變量只能讀取不能直接修改，所以需要放在 computed 中當(dāng)作計(jì)算屬性使用。

2.修改 Vuex 下 state 屬性中的變量

當(dāng)需要修改 state 中的變量時(shí)要在 Vuex 中的 mutations 中定義修改函數(shù)；同理需要在頁(yè)面組件中先引入?mutations 方法的函數(shù)；

import { mapMutations } from "vuex";

在 Vuex 中定義修改函數(shù)；

//Vuex中

mutations: {

//第一個(gè)形參必須是state 第二個(gè)形參為新值

setUid(state, uid) {

state.uid = uid;

},

setUname(state, uname) {

state.uname = uname;

}

},

組件中定義修改函數(shù)，注意是在頁(yè)面組件?export default{ } 中的 method 中定義；

methods: {

...mapMutations(["setUname"]),

setUname(){ }

},

3.在 Vuex 中發(fā)送 Ajax 請(qǐng)求

舉例：在 Vuex 中定義 Ajax 請(qǐng)求實(shí)現(xiàn)登錄效果

（1）首先需要在 Vuex 中頂部提前引入 axios；

import axios from "axios"

（2）Vuex 中?actions 函數(shù)內(nèi)添加?vlogin 函數(shù)；

（3）在 vloin 函數(shù)內(nèi)發(fā)送 axios 請(qǐng)求，并接受返回值；

（4）如返回登陸成功的結(jié)果，則調(diào)用 Vuex 大環(huán)境中的 setUid() 和 setUname() 兩個(gè)函數(shù)，將服務(wù)器返回的 uid 和 uname 兩個(gè)值設(shè)置到 State 中的 uid 和 uname 兩個(gè)屬性上；

（5）如果返回失敗的結(jié)果，則直接調(diào)用 alert，提示失敗。

//Vuex中

import Vue from 'vue'

import Vuex from 'vuex'

import axios from "axios"

Vue.use(Vuex)

export default new Vuex.Store({

state: {

uid: -1,

uname: "匿名"

},

mutations: {

setUid(state, uid) {

state.uid = uid;

},

setUname(state, uname) {

state.uname = uname;

}

},

// 異步

actions: {

// 預(yù)留

// 整個(gè)vuex環(huán)境

// 第一個(gè)參數(shù)必須是context，意為上下文

vlogin(context, obj) {

return new Promise(

function (resolve, reject) {

axios.post(

"/users/signin",

//如果傳入的obj是:{uname:xxx,upwd:xxx}

obj

).then(result => {

if (result.data.ok == 1) {

context.commit(

"setUid", result.data.uid

);

context.commit(

"setUname", result.data.uname

)

resolve();

} else {

reject(result.data.msg);

}

})

}

)

}

},

modules: {}

})

//登陸組件中

Node.js Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。