1 vuex的概念理解
提到vuex,就不能不先提vue.
我個人開始嘗試學習使用vue,是因為此前總是遇到頁面邏輯數據與視圖的一致性問題.在使用vue之前,我們使用jQuery插件的時候,一樁麻煩事就是既要在每個數據變更后,寫代碼去改變視圖,又要考慮html上各種輸入改變時監聽各種事件以改變頁面邏輯數據.當然最早的時候,我們使用html內部的value來記載各種數據,但這種方式在今日看來就有些簡單粗暴了,難以使用復雜的頁面邏輯.這也正是我開始使用vue的初衷--數據雙向綁定.
但對于vue而言,還有一項很強大的功能,就是組件功能.對于這項功能,有兩種使用理解:其一是制作一些簡單輕便的輪子,很難適用于其他項目但很適用于項目內部的多個頁面;其二是路由頁面,理解起來就是將每個頁面看做是一個組件,而不是一個單獨的html頁面;
再開始使用vue的時候,我在每個頁面都會new一個新的vue來實現頁面內部的數據雙向綁定,這種用法本來無可厚非,也能兼容老項目,但僅有一點不足(或者說是老項目的通用不足之處),即邏輯數據的管理是以html頁面為單位的,頁面之間的數據沒有什么可關聯的太好方法(html頁面之間是通過iframe實現連接的,但相互之間的數據交流卻沒有太好的api,且也容易出現兼容性問題).
vuex就是為此準備的,當然有一個前提,就是頁面關聯方式,要通過vue組件的方式關聯起來.使用此種方式后,在使用前臺vue進行編程的一些思想,就要發生一些轉變.這里列舉一下我們可通過數據交流所做的一些事情:
大多數經常調用的基礎數據,可在所有頁面公用,這是適用于技術場合的;
對于組件,常用的有兩種屬性,一是data,一是prop.就我的理解而言,data負責組件內部的邏輯,prop負責與內外部數據之間的數據關聯,如最常見的value.但對于路由頁面組成的框架而言(如iview),如果切換路由頁面,會導致原路由頁面data清空,此時使用vuex.store來存儲數據就可避免這種情況,這是適用于vue組件頁面場合的;
2 vuex的使用
對于一個前臺項目而言,vue組件一定有很多,但vuex只能有一個('/src/store/index.js').當然,可以通過import的方式將vuex開枝散葉(modules),使得不同的module存儲不同的業務數據.以下為vuex的主干內容:
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 }})以下為其中的一個枝葉:/module/basedata.js,用來存儲基礎數據的module:
import { getCusData, getSupSelect } from '../../api/public'/** * 常用基礎數據讀取,注意有以下限制: * 1.必須只能是讀取!!! * 2.必須只能是在基礎模塊的數據!!! * 3.目前僅是通過數據的有無來判斷是否作為緩存,后續可能會通過更加合理和復雜的邏輯來判斷. * @author YangYishe */export default { state: { // 客戶集合 arrCustomer: [], // 供應商集合 arrSupplier: [], nowTimes: 0 }, mutations: { setNowTimes (state, times) { // 測試vuex state的方法 console.log('set now times') state.nowTimes = new Date().getTime() + times }, // 重置客戶數據 setCustomerData (state, arrCustomer) { state.arrCustomer = arrCustomer }, // 重置供應商數據 setSupplierData (state, arrSupplier) { state.arrSupplier = arrSupplier }, }, getters: { }, actions: { // 測試改變方法 handleChangeTimes ({ state, commit }, { times }) { commit('setNowTimes', times) }, // 讀取客戶數據(支持mapState和return兩種用法) loadCustomer ({ state, commit }) { // 讀取客戶數據(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 } }, // 讀取供應商數據(支持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 } }, }}從這個module/basedata.js中,我們很容易看出這個module的大致邏輯.
外界調用方式,可參考如下(這里僅列舉必要代碼):
<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:{ //這里因為是采用vuex.store的分支,不確定采用字符串數組的方式是否可以 ...mapState({ arrCustomer:state=>state.basedata.arrCustomer }) }, created(){ //這里調用的就是mapActions的方法,如果原方法有參數,則默認從第二個參數開始,不需考慮{state} this.loadCustomer(); }, methods:{ //這里采用的是字符串數組的方式 ...mapActions([ 'loadCustomer', ]), } }</script>以上即是vuex的使用方式,個人認為比較中的說明,已經放在代碼中的注釋里了.
3 其他注意點
本文更偏向于讓新手去理解和上手,故代碼偏向于更簡單的方案.
實際使用中,對于緩存更替的考慮可能要更復雜.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
