您好,登錄后才能下訂單哦!
這篇文章主要介紹使用Vuex進(jìn)行web開發(fā)的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
1 vuex的概念理解
提到vuex,就不能不先提vue.
我個(gè)人開始嘗試學(xué)習(xí)使用vue,是因?yàn)榇饲翱偸怯龅巾?yè)面邏輯數(shù)據(jù)與視圖的一致性問(wèn)題.在使用vue之前,我們使用jQuery插件的時(shí)候,一樁麻煩事就是既要在每個(gè)數(shù)據(jù)變更后,寫代碼去改變視圖,又要考慮html上各種輸入改變時(shí)監(jiān)聽各種事件以改變頁(yè)面邏輯數(shù)據(jù).當(dāng)然最早的時(shí)候,我們使用html內(nèi)部的value來(lái)記載各種數(shù)據(jù),但這種方式在今日看來(lái)就有些簡(jiǎn)單粗暴了,難以使用復(fù)雜的頁(yè)面邏輯.這也正是我開始使用vue的初衷--數(shù)據(jù)雙向綁定.
但對(duì)于vue而言,還有一項(xiàng)很強(qiáng)大的功能,就是組件功能.對(duì)于這項(xiàng)功能,有兩種使用理解:其一是制作一些簡(jiǎn)單輕便的輪子,很難適用于其他項(xiàng)目但很適用于項(xiàng)目?jī)?nèi)部的多個(gè)頁(yè)面;其二是路由頁(yè)面,理解起來(lái)就是將每個(gè)頁(yè)面看做是一個(gè)組件,而不是一個(gè)單獨(dú)的html頁(yè)面;
再開始使用vue的時(shí)候,我在每個(gè)頁(yè)面都會(huì)new一個(gè)新的vue來(lái)實(shí)現(xiàn)頁(yè)面內(nèi)部的數(shù)據(jù)雙向綁定,這種用法本來(lái)無(wú)可厚非,也能兼容老項(xiàng)目,但僅有一點(diǎn)不足(或者說(shuō)是老項(xiàng)目的通用不足之處),即邏輯數(shù)據(jù)的管理是以html頁(yè)面為單位的,頁(yè)面之間的數(shù)據(jù)沒(méi)有什么可關(guān)聯(lián)的太好方法(html頁(yè)面之間是通過(guò)iframe實(shí)現(xiàn)連接的,但相互之間的數(shù)據(jù)交流卻沒(méi)有太好的api,且也容易出現(xiàn)兼容性問(wèn)題).
vuex就是為此準(zhǔn)備的,當(dāng)然有一個(gè)前提,就是頁(yè)面關(guān)聯(lián)方式,要通過(guò)vue組件的方式關(guān)聯(lián)起來(lái).使用此種方式后,在使用前臺(tái)vue進(jìn)行編程的一些思想,就要發(fā)生一些轉(zhuǎn)變.這里列舉一下我們可通過(guò)數(shù)據(jù)交流所做的一些事情:
大多數(shù)經(jīng)常調(diào)用的基礎(chǔ)數(shù)據(jù),可在所有頁(yè)面公用,這是適用于技術(shù)場(chǎng)合的;
對(duì)于組件,常用的有兩種屬性,一是data,一是prop.就我的理解而言,data負(fù)責(zé)組件內(nèi)部的邏輯,prop負(fù)責(zé)與內(nèi)外部數(shù)據(jù)之間的數(shù)據(jù)關(guān)聯(lián),如最常見(jiàn)的value.但對(duì)于路由頁(yè)面組成的框架而言(如iview),如果切換路由頁(yè)面,會(huì)導(dǎo)致原路由頁(yè)面data清空,此時(shí)使用vuex.store來(lái)存儲(chǔ)數(shù)據(jù)就可避免這種情況,這是適用于vue組件頁(yè)面場(chǎng)合的;
2 vuex的使用
對(duì)于一個(gè)前臺(tái)項(xiàng)目而言,vue組件一定有很多,但vuex只能有一個(gè)('/src/store/index.js').當(dāng)然,可以通過(guò)import的方式將vuex開枝散葉(modules),使得不同的module存儲(chǔ)不同的業(yè)務(wù)數(shù)據(jù).以下為vuex的主干內(nèi)容:
import Vue from 'vue' import Vuex from 'vuex' import user from './module/user' import app from './module/app' import basedata from './module/basedata' Vue.use(Vuex) export default new Vuex.Store({ state: { // }, mutations: { // }, actions: { // }, modules: { user, app, basedata } })
以下為其中的一個(gè)枝葉:/module/basedata.js,用來(lái)存儲(chǔ)基礎(chǔ)數(shù)據(jù)的module:
import { getCusData, getSupSelect } from '../../api/public' /** * 常用基礎(chǔ)數(shù)據(jù)讀取,注意有以下限制: * 1.必須只能是讀取!!! * 2.必須只能是在基礎(chǔ)模塊的數(shù)據(jù)!!! * 3.目前僅是通過(guò)數(shù)據(jù)的有無(wú)來(lái)判斷是否作為緩存,后續(xù)可能會(huì)通過(guò)更加合理和復(fù)雜的邏輯來(lái)判斷. * @author YangYishe */ export default { state: { // 客戶集合 arrCustomer: [], // 供應(yīng)商集合 arrSupplier: [], nowTimes: 0 }, mutations: { setNowTimes (state, times) { // 測(cè)試vuex state的方法 console.log('set now times') state.nowTimes = new Date().getTime() + times }, // 重置客戶數(shù)據(jù) setCustomerData (state, arrCustomer) { state.arrCustomer = arrCustomer }, // 重置供應(yīng)商數(shù)據(jù) setSupplierData (state, arrSupplier) { state.arrSupplier = arrSupplier }, }, getters: { }, actions: { // 測(cè)試改變方法 handleChangeTimes ({ state, commit }, { times }) { commit('setNowTimes', times) }, // 讀取客戶數(shù)據(jù)(支持mapState和return兩種用法) loadCustomer ({ state, commit }) { // 讀取客戶數(shù)據(jù)(Promise以支持異步操作) if (state.arrCustomer.length === 0) { return new Promise((resolve, reject) => { getCusData().then(res => { commit('setCustomerData', res.data) resolve(res.data) }).catch(err => reject(err)) }) } else { return state.arrCustomer } }, // 讀取供應(yīng)商數(shù)據(jù)(支持mapState和return兩種用法) loadSupplier ({ state, commit }) { if (state.arrSupplier.length === 0) { return new Promise((resolve, reject) => { getSupSelect().then(res => { commit('setSupplierData', res.data) resolve(res.data) }).catch(err => reject(err)) }) } else { return state.arrSupplier } }, } }
從這個(gè)module/basedata.js中,我們很容易看出這個(gè)module的大致邏輯.
state存儲(chǔ)的全局的客戶和供應(yīng)商集合;
mutations一般是用來(lái)同步改變state中的數(shù)據(jù),類似于setters;
getters用來(lái)根據(jù)state計(jì)算各種屬性值;
actions則是異步接收數(shù)據(jù)(不一定必須是異步方法,如第一個(gè)方法,只是外界調(diào)用接口都是從這里調(diào)用的),然后調(diào)用mutations內(nèi)部方法來(lái)改變state的值;
外界調(diào)用方式,可參考如下(這里僅列舉必要代碼):
<template> ... <!-- 這里采用的是iview框架,所以Select和Option都是首字母大寫 --> <Select v-model="mCondition.customerId" clearable filterable> <Option v-for="mCustomer in arrCustomer" :key="mCustomer.id" :value="mCustomer.id">{{mCustomer.name}}</Option> </Select> ... </template> <script> import { mapState, mapActions } from 'vuex' export default{ name:'test-temp', data(){ return { // mCondition:{} } }, computed:{ //這里因?yàn)槭遣捎胿uex.store的分支,不確定采用字符串?dāng)?shù)組的方式是否可以 ...mapState({ arrCustomer:state=>state.basedata.arrCustomer }) }, created(){ //這里調(diào)用的就是mapActions的方法,如果原方法有參數(shù),則默認(rèn)從第二個(gè)參數(shù)開始,不需考慮{state} this.loadCustomer(); }, methods:{ //這里采用的是字符串?dāng)?shù)組的方式 ...mapActions([ 'loadCustomer', ]), } } </script>
以上是“使用Vuex進(jìn)行web開發(fā)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。