1 vuex的概念理解

提到vuex,就不能不先提vue.

我個人開始嘗試學(xué)習(xí)使用vue,是因為此前總是遇到頁面邏輯數(shù)據(jù)與視圖的一致性問題.在使用vue之前,我們使用jQuery插件的時候,一樁麻煩事就是既要在每個數(shù)據(jù)變更后,寫代碼去改變視圖,又要考慮html上各種輸入改變時監(jiān)聽各種事件以改變頁面邏輯數(shù)據(jù).當(dāng)然最早的時候,我們使用html內(nèi)部的value來記載各種數(shù)據(jù),但這種方式在今日看來就有些簡單粗暴了,難以使用復(fù)雜的頁面邏輯.這也正是我開始使用vue的初衷--數(shù)據(jù)雙向綁定.

但對于vue而言,還有一項很強(qiáng)大的功能,就是組件功能.對于這項功能,有兩種使用理解:其一是制作一些簡單輕便的輪子,很難適用于其他項目但很適用于項目內(nèi)部的多個頁面;其二是路由頁面,理解起來就是將每個頁面看做是一個組件,而不是一個單獨的html頁面;

再開始使用vue的時候,我在每個頁面都會new一個新的vue來實現(xiàn)頁面內(nèi)部的數(shù)據(jù)雙向綁定,這種用法本來無可厚非,也能兼容老項目,但僅有一點不足(或者說是老項目的通用不足之處),即邏輯數(shù)據(jù)的管理是以html頁面為單位的,頁面之間的數(shù)據(jù)沒有什么可關(guān)聯(lián)的太好方法(html頁面之間是通過iframe實現(xiàn)連接的,但相互之間的數(shù)據(jù)交流卻沒有太好的api,且也容易出現(xiàn)兼容性問題).

vuex就是為此準(zhǔn)備的,當(dāng)然有一個前提,就是頁面關(guān)聯(lián)方式,要通過vue組件的方式關(guān)聯(lián)起來.使用此種方式后,在使用前臺vue進(jìn)行編程的一些思想,就要發(fā)生一些轉(zhuǎn)變.這里列舉一下我們可通過數(shù)據(jù)交流所做的一些事情:

大多數(shù)經(jīng)常調(diào)用的基礎(chǔ)數(shù)據(jù),可在所有頁面公用,這是適用于技術(shù)場合的;

對于組件,常用的有兩種屬性,一是data,一是prop.就我的理解而言,data負(fù)責(zé)組件內(nèi)部的邏輯,prop負(fù)責(zé)與內(nèi)外部數(shù)據(jù)之間的數(shù)據(jù)關(guān)聯(lián),如最常見的value.但對于路由頁面組成的框架而言(如iview),如果切換路由頁面,會導(dǎo)致原路由頁面data清空,此時使用vuex.store來存儲數(shù)據(jù)就可避免這種情況,這是適用于vue組件頁面場合的;

2 vuex的使用

對于一個前臺項目而言,vue組件一定有很多,但vuex只能有一個('/src/store/index.js').當(dāng)然,可以通過import的方式將vuex開枝散葉(modules),使得不同的module存儲不同的業(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 }})

以下為其中的一個枝葉:/module/basedata.js,用來存儲基礎(chǔ)數(shù)據(jù)的module:

import { getCusData, getSupSelect } from '../../api/public'/** * 常用基礎(chǔ)數(shù)據(jù)讀取,注意有以下限制: * 1.必須只能是讀取!!! * 2.必須只能是在基礎(chǔ)模塊的數(shù)據(jù)!!! * 3.目前僅是通過數(shù)據(jù)的有無來判斷是否作為緩存,后續(xù)可能會通過更加合理和復(fù)雜的邏輯來判斷. * @author YangYishe */export default { state: {  // 客戶集合  arrCustomer: [],  // 供應(yīng)商集合  arrSupplier: [],    nowTimes: 0 }, mutations: {  setNowTimes (state, times) {   // 測試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: {  // 測試改變方法  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   }  },   }}